jquery中通過過濾器擷取表單元素的實現代碼

最後更新：2013-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

:enable 擷取可輸入狀態的元素
:disabled 擷取不可輸入狀態的元素
:checked 擷取選中的表單元素
:seleced 擷取下拉框中選中的元素
下面看一粒例子
Html
複製代碼代碼如下:
<body>
<form id="form1" runat="server">
<div>
<ul>
<li><label>訂單號碼：</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="藍"/>藍
<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代碼：
複製代碼代碼如下:
<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("選擇的資料："+vv);
$(":checkbox").click(checkboxclick);
}
)()
$("select").change(function(){
var tt='';
$("select option:selected").each(function(){
tt+=$(this).text()+",";
});
$("#option").html("選擇的項目是："+tt);
}).trigger("change");
});
</script>

這裡面有幾點需要注意的是：
1 前面說到bind用來綁定事件，那麼這裡的unbind就是取消事件的
2 trigger() 方法觸發被選元素的指定事件類型。
3 在jQuery(function(){裡添加函數的時候，外面要加上括弧，後面要加上小括弧，如下
jQuery(function(){
(
function check()
{
})()
})
4 實現層中複選框選中並賦給其他元素值
html
複製代碼代碼如下:
<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="藍"/>藍
<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
複製代碼代碼如下:
jQuery(function(){
(
function checkboxclick(){
$(":checkbox").unbind("click",checkboxclick);
var vv='';
$(":checkbox:checked").each(function(){
vv+=$(this).val()+",";
})
$("#cc").html("選擇的資料："+vv);
$(":checkbox").click(checkboxclick);
})()
})

如下這種：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More