學習jQuer對錶單、表格操作的過程中，按照書上的例子發現一個問題： 以下代碼同樣使用prop()函數，使用attr()方法也不能實現預期 ...
學習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>
