<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11</title> <script src="https://www.jb51.net/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 action="#"> <button type="reset">重置所有表单元素</button> <br /> <br /> <button>对表单内 可用input 赋值操作.</button> <button>对表单内 不可用input 赋值操作.</button> <br /> <br /> 可用元素： <input value="可用文本框"/> <br/> 不可用元素： <input disabled="disabled" value="不可用文本框"/> <br/> 可用元素： <input value="可用文本框" /> <br/> 不可用元素： <input disabled="disabled" value="不可用文本框"/> <br/> <br/> 多选框：<br/> <input type="checkbox" checked="checked" value="test1" /> test1 <input type="checkbox" value="test2" /> test2 <input type="checkbox" value="test3" /> test3 <input type="checkbox" checked="checked" value="test4" /> test4 <input type="checkbox" value="test5" /> test5 <div></div> <br/> <br/> 下拉列表1：<br/> <select multiple="multiple"> <option>浙江</option> <option selected="selected">湖南</option> <option>北京</option> <option selected="selected">天津</option> <option>广东</option> <option>湖北</option> </select> <br/> <br/> 下拉列表2：<br/> <select > <option>浙江</option> <option>湖南</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> <br/> <br/> <div></div> </form> </body> </html>
运行效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》