今天,看了一本书,书名叫锋利的Jquery,一看果然够锋利的,今天看到的一个全选的功能块,想跟大家分享一下!当我还不知道的时候我写了好多代码才实现这个功能的,原来这个功能还可以这么简单的就实现了,顿时蒙了,一定下决心把这本书看下去。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #menu { 500px; height:500px; margin:0px auto; } </style> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function () { //01定位到全选按钮对象,注册单击事件 $("input[name=qx]").click(function () { /*02this.checked判断全选按钮是否选中返回true和false复选框全选中attr("checked",false)不选中attr("checked",true)选中如果当前全选按钮选中的话,就让子的*/ $(".yd").attr("checked",this.checked); }); //03.定位到子的复选框对象,注册单击事件 $(".yd").click(function () { //获取整个子复选框集合 var $myinput = $(".yd"); //定位到全选按钮对象,改变attr属性值,(如果子的复选框的个数==被选中的子复选框个数)==true $("input[name=qx]").attr("checked", $myinput.length == $myinput.filter(":checked").length); }); }); </script> </head> <body> <div id="menu"> <label>你喜欢的爱好的是?</label> <br /> <input type="checkbox" name="1" value=" " class="yd"/>足球 <input type="checkbox" name="2" value=" " class="yd" />篮球 <input type="checkbox" name="3" value=" " class="yd"/>羽毛球 <input type="checkbox" name="4" value=" " class="yd"/>排球 <input type="checkbox" name="5" value=" " class="yd"/>橄榄球<br /> <input type="checkbox" name="qx" value=""/>全选 </div> </body> </html>