首页 > 代码库 > 复选框的全选(引自锋利的jQuery)
复选框的全选(引自锋利的jQuery)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta name="generator" content="text/html" charset="utf-8" /> 5 <title>复选框组的全选/非全选</title> 6 <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 7 <!-- 8 思路： 9 方法一：10 1.对复选框组绑定单击事件。11 2.定义一个flag变量，默认为true。12 3.循环复选框组，当有没被选中的项时，则把变量flag的值设为false。13 4.根据变量flag的值来设置id为“CheckedAll”的复选框是否被选中。14 (1)如果flag为true,说明复选框组都被选中。15 (2)如果flag为false,说明复选框组至少有一个未被选中。16 方法二：17 1.对复选框组绑定单击事件。18 2.判断复选框的总数是否与选中的复选框数量相等。19 3.如果相等，则说明全选中了，id为“CheckedAll”的复选框应当处于选中状态，否则不选中。20 -->21 </head>22 <body>23 <form>24 <b>你爱好的运动是？</b><br />25 <input type="checkbox" id="CheckedAll" /><label for="CheckedAll" >全选/全不选</label><br />26 <input type="checkbox" id="chk1" name="items" value="足球" /><label for="chk1">足球</label>27 <input type="checkbox" id="chk2" name="items" value="篮球" /><label for="chk2">篮球</label>28 <input type="checkbox" id="chk3" name="items" value="羽毛球" /><label for="chk3">羽毛球</label>29 <input type="checkbox" id="chk4" name="items" value="乒乓球" /><label for="chk4">乒乓球<br /></label>30 <input type="button" id="send" value="提 交" /> 31 </form>32 <script>33 //对复选框组绑定单击事件34 //方法一：35 //$(‘[name=items]:checkbox‘).click(function () {36 // var flag = true;37 // $(‘[name=items]:checkbox‘).each(function () {38 // if (!this.checked) {39 // flag = false;40 // }41 // });42 // $(‘#CheckedAll‘).attr(‘checked‘, flag);43 //})44 //方法二：45 $(‘[name=items]:checkbox‘).click(function () {46 //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率47 var $tmp = $(‘[name=items]:checkbox‘);48 //用filter()方法筛选出选中的复选框，并直接给CheckdAll赋值49 $(‘#CheckedAll‘).attr(‘checked‘, $tmp.length == $tmp.filter(‘:checked‘).length);50 })51 52 //全选/全不选复选框绑定单击事件53 $("#CheckedAll").click(function () {54 if (this.checked) {//如果当前单击的复选框被选中55 $(‘[name=items]:checkbox‘).attr("checked", true);56 } else {57 $(‘[name=items]:checkbox‘).attr("checked", false);58 }59 //简化后的方法60 //$(‘[name=items]:checkbox‘).attr("checked", this.checked); 61 })62 //提交按钮绑定单击事件63 $("#send").click(function () {64 var str = "你选中的是：\r\n";65 $(‘[name=items]:checkbox:checked‘).each(function () {66 str += $(this).val() + "\r\n";67 });68 alert(str);69 })70 </script>71 </body>72 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。