标签：style blog http color java 使用 io for
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>
复选框的全选(引自锋利的jQuery),布布扣,bubuko.com
标签：style blog http color java 使用 io for
原文地址：http://www.cnblogs.com/hellowzl/p/3879427.html
