码迷,mamicode.com
首页 > 其他好文 > 详细

作业【通过复选框按钮全选】

时间:2017-03-18 22:47:44      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:table   doc   bsp   set   type   title   inpu   i++   java   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东京八十万萝莉总教头</title>
</head>
<body>
        <table border="1" style="text-align:center;">
        <tr>
            <td>序号</td>
            <td>事情</td>
            <td>选项</td>
        </tr>
        <tr>
            <td>1</td>
            <td>大妹子爆炸</td>
            <td><input type="checkbox" name="check" onchange="che()" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>小妹子爆炸</td>
            <td><input type="checkbox" name="check" onchange="che()" /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>中妹子爆炸</td>
            <td><input type="checkbox" name="check" onchange="che()" /></td>
        </tr>
        <tr>
            <td>4</td>
            <td>东京八十万萝莉爆炸</td>
            <td><input type="checkbox" name="check" onchange="che()" /></td>
        </tr>
        <tr>
            <td colspan="3">所有妹子爆炸<input type="checkbox" onchange="bz()" id="all"/></td>
        </tr>
    </table>
    <script type="text/javascript">
        function bz(){
             var ck_list = document.getElementsByName("check");
             for (var i = 0; i < ck_list.length; i++) {
                 ck_list[i].checked=!ck_list[i].checked;
             };
        }

        //如果全选则把总的√打上  每次选框的时候都统计一次,看看是否有全选
        function che(){
            var ck_list = document.getElementsByName("check");
            var num =0;
              for (var i = 0; i < ck_list.length; i++) {
                  if(ck_list[i].checked){
                      num++;
                  }
              };
              if(num == ck_list.length){
                  document.getElementById("all").checked=true;
              }else if(num < ck_list.length){
                  document.getElementById("all").checked=false;
              }
               
        }
    </script>
</body>
</html>

 

作业【通过复选框按钮全选】

标签:table   doc   bsp   set   type   title   inpu   i++   java   

原文地址:http://www.cnblogs.com/bbqwifi/p/6576277.html

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