jquery中通過(guò)過(guò)濾器獲取表單元素的實(shí)現(xiàn)代碼

更新時(shí)間：2011年07月05日 23:20:55 作者：

通過(guò)過(guò)濾器可以獲取特定的表單元素，如非輸入項(xiàng)目或者單選按鈕的已選項(xiàng)目等元素，可用的

:enable 獲取可輸入狀態(tài)的元素
:disabled 獲取不可輸入狀態(tài)的元素
:checked 獲取選中的表單元素
:seleced 獲取下拉框中選中的元素
下面看一粒例子
Html

 
<body> 
<form id="form1" runat="server"> 
<div> 
<ul> 
<li><label>訂單號(hào)碼：</label><input type="text" disabled="disabled" /></li> 
<li><label>訂單所有者：</label><input type="text" /></li> 
<li> 
<input type="checkbox" name="ca" value="紅"/>紅 
<input type="checkbox" name="ca" value="黃"/>黃 
<input type="checkbox" name="ca" value="藍(lán)"/>藍(lán) 
<input type="checkbox" name="ca" value="綠"/>綠 
</li> 
<li> 
<select multiple="multiple"> 
<option>選擇1</option> 
<option>選擇2</option> 
<option>選擇3</option> 
<option>選擇4</option> 
</select> 
</li> 
</ul> 
</div> 
</form> <div id="msg"> 
<p id="cc"></p> 
<p id="option"></p> </div> 
</body> 

JavaScript代碼：

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

 
<script type="text/javascript"> 
jQuery(function(){ 
$("input:text:disabled").val("不能輸入"); 
$("input:text:enabled").val("能輸入"); 
( 
function checkboxclick(){ 
$(":checkbox").unbind("click",checkboxclick); 
var vv=''; 
$(":checkbox:checked").each(function(){ 
vv+=$(this).val()+","; 
}); 
$("#cc").html("選擇的數(shù)據(jù)："+vv); 
$(":checkbox").click(checkboxclick); 
} 
)() 
$("select").change(function(){ 
var tt=''; 
$("select option:selected").each(function(){ 
tt+=$(this).text()+","; 
}); 
$("#option").html("選擇的項(xiàng)目是："+tt); 
}).trigger("change"); 
}); 
</script> 

這里面有幾點(diǎn)需要注意的是：
1 前面說(shuō)到bind用來(lái)綁定事件，那么這里的unbind就是取消事件的
2 trigger() 方法觸發(fā)被選元素的指定事件類型。
3 在jQuery(function(){里添加函數(shù)的時(shí)候，外面要加上括號(hào)，后面要加上小括號(hào)，如下
jQuery(function(){
(
function check()
{
})()
})
4 實(shí)現(xiàn)層中復(fù)選框選中并賦給其他元素值
html

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

 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="彈出" /> 
<input type="checkbox" name="ca" value="紅"/>紅 
<input type="checkbox" name="ca" value="黃"/>黃 
<input type="checkbox" name="ca" value="藍(lán)"/>藍(lán) 
<input type="checkbox" name="ca" value="綠"/>綠 
<input type="checkbox" name="ca" value="白"/>白 
<input type="checkbox" name="ca" value="黑"/>黑 
</div> 
<div id="cc"></div> 
</form> 

javascript

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

 
jQuery(function(){ 
( 
function checkboxclick(){ 
$(":checkbox").unbind("click",checkboxclick); 
var vv=''; 
$(":checkbox:checked").each(function(){ 
vv+=$(this).val()+","; 
}) 
$("#cc").html("選擇的數(shù)據(jù)："+vv); 
$(":checkbox").click(checkboxclick); 
})() 
}) 

效果圖如下這種：