學習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="https://www.cnblogs.com/planetwithpig/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="https://www.cnblogs.com/planetwithpig/p/足球"/>足球55 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/籃球"/>籃球56 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/羽毛球"/>羽毛球57 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/乒乓球"/>乒乓球<br/>58 <input type="button" id="CheckedAll" value="https://www.cnblogs.com/planetwithpig/p/全選"/>59 <input type="button" id="CheckedNo" value="https://www.cnblogs.com/planetwithpig/p/全不選"/>60 <input type="button" id="CheckedRev" value="https://www.cnblogs.com/planetwithpig/p/反選"/>61 <input type="button" id="send" value="https://www.cnblogs.com/planetwithpig/p/提交"/>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="https://www.cnblogs.com/planetwithpig/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()時，回傳undifined33 });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="https://www.cnblogs.com/planetwithpig/p/全選/全不選" />全選/全不選<br/>55 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/足球"/>足球56 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/籃球"/>籃球57 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/羽毛球"/>羽毛球58 <input type="checkbox" name="items" value="https://www.cnblogs.com/planetwithpig/p/乒乓球"/>乒乓球<br/> 59 <input type="button" id="CheckedRev" value="https://www.cnblogs.com/planetwithpig/p/反選"/>60 <input type="button" id="send" value="https://www.cnblogs.com/planetwithpig/p/提交"/>61 </form>62 </body>63 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39140.html
標籤：jQuery