学习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()时，返回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="全选/全不选" />全选/全不选<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>
原文链接：http://www.cnblogs.com/planetwithpig/p/11578801.html
本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728
经验首页