<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script type="text/javascript"> <!--全选框的方法--> function check(object){ var checks=document.getElementsByName("checks"); if (checks!=null) { for (var i=0;i<checks.length;i++ ) { checks[i].checked=document.getElementById("checkAll").checked; } } }; <!--这里要注意如果 var checkall=document.getElementById("checkAll").checked; 下面判断 checkall==true 语句是错的!逻辑是对的,语法是错的--> function checks(){ var checkall=document.getElementById("checkAll"); var checks=document.getElementsByName("checks"); var count=0; var sum=0; for (var i=0;i<checks.length ;i++ ) { if (checks[i].checked==true) { count=count+1; } if(checks[i].checked==false){ sum=sum+1; } } alert(sum); if (count==checks.length) { checkall.checked=true; } if (sum>0) { if (checkall.checked==true) { checkall.checked=false; } } } </script> </head> <body> <div id="" class=""> <table> <tr> <td><input type="checkbox" id="checkAll" onclick="check(this)"></td> <td>商品名称</td> <td>商品价格</td> <td>商品描述</td> </tr> <tr> <td><input type="checkbox" name="checks" onclick="checks()"></td> <td>酒精</td> <td>12</td> <td>酒精你懂的</td> </tr> <tr> <td><input type="checkbox" name="checks" onclick="checks()"></td> <td>饭盒</td> <td>15</td> <td>吃饭的工具,你不知道?</td> </tr> <tr> <td><input type="checkbox" name="checks" onclick="checks()"></td> <td>酒精</td> <td>12</td> <td>酒精你懂的</td> </tr> <tr> <td><input type="checkbox" name="checks" onclick="checks()"></td> <td>饭盒</td> <td>15</td> <td>吃饭的工具,你不知道?</td> </tr> <tr> <td><input type="checkbox" name="checks" onclick="checks()"></td> <td>酒精</td> <td>12</td> <td>酒精你懂的</td> </tr> <tr> <td><input type="checkbox" name="checks" onclick="checks()"></td> <td>饭盒</td> <td>15</td> <td>吃饭的工具,你不知道?</td> </tr> </table> </div> </body> </html> 运行效果图
时间: 2024-10-11 13:05:39