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>

运行效果图

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。