Jscript复选框

<!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>

运行效果图 (第一个是全选框,下面是子选框)

原文地址:https://www.cnblogs.com/ClodThunder/p/3934295.html