jQuery對表單的操作代碼集合

2019-11-20 23:52:17

字體：大中小

供稿：網(wǎng)友

改變文本框的獲得焦點的樣式

 
<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代碼如下：

復(fù)制代碼代碼如下:

 
.focus { 
border: 1px solid #f00; 
background: #fcc; 
} 

然后為文本框添加獲取和失去焦點事件

復(fù)制代碼代碼如下:

 
$(function(){ 
$(":input").focus(function(){ 
$(this).addClass("focus"); 
}).blur(function(){ 
$(this).removeClass("focus"); 
}); 
}); 

多行文本框的作用
設(shè)置評論框的最小高度和最大高度：

復(fù)制代碼代碼如下:

 
<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,當(dāng)單擊“放大”按鈕后，如果評論框的高度小于500px,則在原有高度的基礎(chǔ)上增加50px;
2.當(dāng)單擊“縮小”按鈕后，如果評論框的高度大于50px,則在原有高度的基礎(chǔ)上減少50px;

復(fù)制代碼代碼如下:

 
$(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); 
} 
} 
}) 
}) 

滾動條高度的變化
控制多行文本框滾動條的變化：

復(fù)制代碼代碼如下:

 
$(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); 
}) 
}) 

復(fù)選框的應(yīng)用
基本應(yīng)用：對復(fù)選框進(jìn)行全選，反選，全不選操作。

復(fù)制代碼代碼如下:

 
<form> 
你愛好的運(yùn)動？<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); 
); 