复选框使用总结
对复选框最基本的应用, 就是对复选框进行全选,反选和全不选等操作.复杂的操作需要与选项挂钩,来达到各种级联效果.
首先在空白网页中创建一个表单, 其中放入一组复选框:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action=""> 9 你爱好的运动是?<br/> 10 <input type="checkbox" name="items" value="足球"/>足球 11 <input type="checkbox" name="items" value="篮球"/>篮球 12 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 13 <input type="checkbox" name="items" value="兵乓球"/>兵乓球 14 <input type="checkbox" name="items" value="排球"/>排球<br/> 15 <input type="button" id="CheckedAll" value="全选"/> 16 <input type="button" id="CheckedNo" value="全不选"/> 17 <input type="button" id="CheckedRev" value="反选"/> 18 <input type="button" id="send" value="提交"> 19 </form> 20 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 21 <script type="text/javascript"> 22 $(function () { 23 //全选 24 $("#CheckedAll").click(function () { 25 $("[name = items]:checkbox").attr("checked",true); 26 }); 27 //全不选 28 $("#CheckedNo").click(function () { 29 $("[name = items]:checkbox").attr("checked",false); 30 }); 31 //反选 32 /*** 33 * 反选需要循环每一个复选框进行设置,取他们值得反值. 34 */ 35 $("#CheckedRev").click(function () { 36 $("[name = items]:checkbox").each(function(){ 37 $(this).attr("checked",!$(this).attr("checked")); 38 }); 39 }); 40 /*** 41 * 此处用jQuery的attr()方法来设置属性checked的有些复杂,如果改用javascript原生的DOM方法,将比jQuery对象更有效和简洁. 42 */ 43 $("#CheckedRev").click(function () { 44 $("[name = items]:checkbox").each(function(){ 45 this.checked = !this.checked; 46 }); 47 }); 48 /*** 49 * 复选框选中后,用户单机提交按钮, 需要将选中的项的值输出.可以通过val()方法获取选中的值. 50 */ 51 $("#send").click(function () { 52 var str = "你选中的是:\r\n"; 53 $("[name = items]:checkbox:checked").each(function(){ 54 str += $(this).val() + "\r\n"; 55 }); 56 console.log(str); 57 }); 58 }); 59 </script> 60 </body> 61 </html>
效果截图:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action=""> 9 你爱好的运动是?<br/> 10 <input type="checkbox" id="CheckedAll"/>全选/全不选<br/> 11 <input type="checkbox" name="items" value="足球"/>足球 12 <input type="checkbox" name="items" value="篮球"/>篮球 13 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 14 <input type="checkbox" name="items" value="兵乓球"/>兵乓球 15 <input type="checkbox" name="items" value="排球"/>排球<br/> 16 <input type="button" id="send" value="提交"> 17 </form> 18 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 19 <script type="text/javascript"> 20 $(function () { 21 //全选 22 // $("#CheckedAll").click(function () {//如果当前单机的复选框被选中 23 // if(this.checked){ 24 // $("[name = items]:checkbox").attr("checked",true); 25 // }else{ 26 // $("[name = items]:checkbox").attr("checked",false); 27 // } 28 // }); 29 30 /*** 31 * 所有复选框的checked属性的值和控制全选的复选框的checked属性的值是相同的, 因此可以省略if判断,直接赋值 32 */ 33 34 // $("#CheckedAll").click(function () {//如果当前单机的复选框被选中 35 // $("[name = items]:checkbox").attr("checked",this.checked); 36 // }); 37 38 /*** 39 * 当单机id为CheckedAll的复选框后, 复选框组被选中. 40 * 当复选框组里取消某一个选项的选中状态, id为CheckedAll的复选框并没有被取消选中状态. 41 * 而此时需要它和复选框能够联系起来,即复选框组里如果有一个或者更多没选中时,则取消d为CheckedAll的复选框的选中状态. 42 * 如果复选框组被选中时,则d为CheckedAll的复选框也自动被选中. 43 * 因此需要对复选框组进行操作, 以通过他们来控制d为CheckedAll的复选框. 44 * (1)对复选框组绑定单击事件. 45 * (2)定义一个flag变量, 默认为true 46 * (3)循环复选框组, 当有没被选中的项时,则把变量flag的值设置为false. 47 * (4)根军变量flag的值来设置id为CheckedAll的复选框是否选中. 48 */ 49 50 $("#CheckedAll").click(function () {//如果当前单机的复选框被选中 51 $("[name = items]:checkbox").attr("checked",this.checked); 52 }); 53 // $("[name = items]:checkbox").click(function () { 54 // var flag = true; 55 // $("[name = items]:checkbox").each(function () { 56 // if(!this.checked){ 57 // flag = false; 58 // } 59 // }); 60 // $("#CheckedAll").attr("checked", flag); 61 // }); 62 /*** 63 * 另一种办法 64 * (1)对复选框绑定单击事件 65 * (2)判断复选框的总数是否与选中复选框数量相等. 66 * (3)如果相等,则说明全部选中,否则不选中. 67 */ 68 $("[name = items]:checkbox").click(function () { 69 //定义一个临时变量, 避免重复使用同一个选择器选择页面中的元素, 提高程序效率 70 var $tmp = $("[name = items]:checkbox"); 71 //用filter()方法筛选出选中的复选框,并直接给CheckedAll赋值 72 $("#CheckedAll").attr("checked", $tmp.length == $tmp.filter(":checked").length); 73 }); 74 75 $("#send").click(function () { 76 var str = "你选中的是:\r\n"; 77 $("[name = items]:checkbox:checked").each(function(){ 78 str += $(this).val() + "\r\n"; 79 }); 80 console.log(str); 81 }); 82 }); 83 </script> 84 </body> 85 </html>
下过截图:
