jQuery對錶單的作業碼集合

改變文字框的獲得焦點的樣式
複製代碼 代碼如下:
<form action="#" method="POST" id="regForm">
<fieldset>
<legend>個人基本資料</legend>
<div>
<label for="username">名稱：</label>
<input id="username" type="text">
</div>
</fieldset>
</form>

首先在css中添加一個類名為focus的樣式。
css代碼如下：
複製代碼 代碼如下:
.focus {
border: 1px solid #f00;
background: #fcc;
}

然後為文字框添加擷取和失去焦時間點事件
複製代碼 代碼如下:
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});

多行文字框的作用
設定評論框的最小高度和最大高度：
複製代碼 代碼如下:
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">縮小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文字框高度變化</textarea>
</div>
</div>
</form>

1,當單擊“放大”按鈕後，如果評論框的高度小於500px,則在原有高度的基礎上增加50px;
2.當單擊“縮小”按鈕後，如果評論框的高度大於50px,則在原有高度的基礎上減少50px;
複製代碼 代碼如下:
$(function(){
var $comment = $('#comment'); //擷取評論框
$('.bigger').click(function(){
if(!$comment.is(":animated")){ //判斷是否處於動畫
if($comment.height() < 500){
$comment.animate({height : "+=50"}, 400);
}
}
})
$('.smaller').click(function(){
if(!$comment.is(":animated")){ //判斷是否處於動畫
if($comment.height() > 50){
$comment.animate({height : "-=50"}, 400);
}
}
})
})

捲軸高度的變化
控制多行文字框捲軸的變化：
複製代碼 代碼如下:
$(function(){
var $comment = $('#comment');
$('.up').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : "-=50"}, 400);
}
})
$('.down').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : "+=50"}, 400);
})
})

複選框的應用
基本應用：對複選框進行全選，反選，全不選操作。
複製代碼 代碼如下:
<form>
你愛好的運動？<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乓球球
<input type="button" id="CheckedAll" value="全選"/>
<input type="button" id="CheckedNo" value="全不選"/>
<input type="button" id="CheckedRev" value="反選"/>
<input type="button" id="send" value="提 交"/>
//全選
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked',true);
});
//全不選
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').attr('checked',false);
});
//反選
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked = !this.checked;
}));
//提交按鈕
$("#send").click(function(){
var str = "你選中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+'\r\n'})
alert(str);
);