码迷,mamicode.com
首页 > Web开发 > 详细

Jscript复选框

时间:2014-08-25 09:59:24      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   java   io   for   ar   

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

运行效果图
bubuko.com,布布扣

 

Jscript复选框

标签:des   style   blog   http   color   java   io   for   ar   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!