jQuery——复选框操作
学习jQuer对表单、表格操作的过程中，按照书上的例子发现一个问题：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>复选框应用</title> 5 <style type="text/css"> 6 form{ 7 border:1px solid #ccc; 8 width:300px; 9 padding:10px; 10 margin:auto; 11 } 12 </style> 13 <script type="text/javascript" src="../jquery-3.4.1.js"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 //书上如此添加按钮事件处理——问题：当单击触发了反选事件之后，再次点击“全选”、“全不选”按钮不起作用，需要按照如下修改，即使用each()方法，才可以；或者将attr()方法修改为prop()方法也可实现预期 17 // $("#CheckedAll").click(function(){ 18 // $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期 19 // }); 20 // $("#CheckedNo").click(function(){ 21 // $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期 22 // }); 23 24 $("#CheckedAll").click(function(){ 25 $("[name=items]:checkbox").each(function(){ 26 this.checked=true; 27 }); 28 }); 29 $("#CheckedNo").click(function(){ 30 $("[name=items]:checkbox").each(function(){ 31 this.checked=false; 32 }); 33 }); 34 $("#CheckedRev").click(function(){ 35 $("[name=items]:checkbox").each(function(){ 36 // $(this).attr("checked",!$(this).attr("checked")); 37 this.checked=!this.checked; 38 }); 39 }); 40 $("#send").click(function(){ 41 var str="你选中的是：\r\n"; 42 $("[name=items]:checkbox").each(function(){ 43 if(this.checked) 44 str+=$(this).val()+"\r\n"; 45 }); 46 alert(str); 47 }); 48 }) 49 </script> 50 </head> 51 <body> 52 <form> 53 你爱好的运动是？<br/> 54 <input type="checkbox" name="items" value="足球"/>足球 55 <input type="checkbox" name="items" value="篮球"/>篮球 56 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 57 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/> 58 <input type="button" id="CheckedAll" value="全选"/> 59 <input type="button" id="CheckedNo" value="全不选"/> 60 <input type="button" id="CheckedRev" value="反选"/> 61 <input type="button" id="send" value="提交"/> 62 </form> 63 </body> 64 </html>
以下代码同样使用prop()函数，使用attr()方法也不能实现预期
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>复选框应用</title> 5 <style type="text/css"> 6 form{ 7 border:1px solid #ccc; 8 width:500px; 9 padding:10px; 10 margin:auto; 11 font-size:20px; 12 } 13 </style> 14 <script type="text/javascript" src="../jquery-3.4.1.js"></script> 15 <script type="text/javascript"> 16 $(function(){ 17 $("#CheckedAll").click(function(){ 18 $("[name=items]:checkbox").prop("checked",this.checked); 19 }); 20 21 $("[name=items]:checkbox").click(function(){ 22 var flag=true; 23 $("[name=items]:checkbox").each(function(){ 24 if(!this.checked) 25 flag=false; 26 }); 27 // alert($("#CheckedAll")[0]); 28 // alert($("#CheckedAll")[0].getAttribute("checked")); 29 //此处使用attract()方法，在IE中和在chrome中均不能实现预期，需要修改为prop()方法 30 // $("#CheckedAll").attr("checked",flag); 31 $("#CheckedAll").prop("checked",flag); 32 // alert($("#CheckedAll").prop("checked"));//使用attr()时，返回undifined 33 }); 34 35 $("#CheckedRev").click(function(){ 36 $("[name=items]:checkbox").each(function(){ 37 // $(this).prop("checked",!$(this).attr("checked")); 38 this.checked=!this.checked; 39 }); 40 }); 41 $("#send").click(function(){ 42 var str="你选中的是：\r\n"; 43 $("[name=items]:checkbox").each(function(){ 44 if(this.checked) 45 str+=$(this).val()+"\r\n"; 46 }); 47 alert(str); 48 }); 49 }) 50 </script> 51 </head> 52 <body> 53 <form> 54 你爱好的运动是？<input type="checkbox" id="CheckedAll" value="全选/全不选" />全选/全不选<br/> 55 <input type="checkbox" name="items" value="足球"/>足球 56 <input type="checkbox" name="items" value="篮球"/>篮球 57 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 58 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/> 59 <input type="button" id="CheckedRev" value="反选"/> 60 <input type="button" id="send" value="提交"/> 61 </form> 62 </body> 63 </html>
