学习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/java script" src="../jquery-3.4.1.js"></script> 14 <script type="text/java script"> 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/java script" src="../jquery-3.4.1.js"></script> 15 <script type="text/java script"> 16 $(function(){ 17 $("#CheckedAll").click(function(){ 18 $("[name=items]:checkbox").prop("