本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考，具体如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ //重置表单元素 $(":reset").click(function(){ setTimeout(function() { countChecked(); $("select").change(); },0); }); //对表单内 可用input 赋值操作. $('#btn1').click(function(){ $("#form1 input:enabled").val("这里变化了！"); return false; }) //对表单内 不可用input 赋值操作. $('#btn2').click(function(){ $("#form1 input:disabled").val("这里变化了！"); return false; }) //使用:checked选择器，来操作多选框. $(":checkbox").click(countChecked); function countChecked() { var n = $("input:checked").length; $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>"); } countChecked();//进入页面就调用. //使用:selected选择器，来操作下拉列表. $("select").change(function () { var str = ""; $("select :selected").each(function () { str += $(this).text() + ","; }); $("div").eq(1).html("<strong>你选中的是："+str+"</strong>"); }).trigger('change'); // trigger('change') 在这里的意思是： // select加载后，马上执行onchange. // 也可以用.change()代替. }); //]]> </script> </head> <body> <h3> 表单对象属性过滤选择器.</h3> <form id="form1" action="#"> <button type="reset">重置所有表单元素</button> <br /> <br /> <button id="btn1">对表单内 可用input 赋值操作.</button> <button id="btn2">对表单内 不可用input 赋值操作.</button> <br /> <br /> 可用元素： <input name="add" value="可用文本框"/> <br/> 不可用元素： <input name="email" disabled="disabled" value="不可用文本框"/> <br/> 可用元素： <input name="che" value="可用文本框" /> <br/> 不可用元素： <input name="name" disabled="disabled" value="不可用文本框"/> <br/> <br/> 多选框：<br/> <input type="checkbox" name="newsletter" checked="checked" value="test1" /> test1 <input type="checkbox" name="newsletter" value="test2" /> test2 <input type="checkbox" name="newsletter" value="test3" /> test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" /> test4 <input type="checkbox" name="newsletter" value="test5" /> test5 <div></div> <br/> <br/> 下拉列表1：<br/> <select name="test" multiple="multiple"> <option>浙江</option> <option selected="selected">湖南</option> <option>北京</option> <option selected="selected">天津</option> <option>广东</option> <option>湖北</option> </select> <br/> <br/> 下拉列表2：<br/> <select name="test2" > <option>浙江</option> <option>湖南</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> <br/> <br/> <div></div> </form> </body> </html>
运行效果图如下：
希望本文所述对大家jQuery程序设计有所帮助。
【jQuery表单对象属性过滤选择器实例详解】相关文章：
★ JavaScript正则表达式中的ignoreCase属性使用详解