A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 逆风TO 黑马粉丝团   /  2019-6-18 13:56  /  768 人查看  /  0 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

注意点
在获取子选框的时候别加上 全选框的个数了

技巧

找 tbody 下面的input标签 就可以

jq文件夹自己下载即可

思路

var all=my$("j_tb").getElementsByTagName("input");
        // alert(all.length);
        //实现1  点击全选  子选框都得被全选
       
        /**
         *
         * 点击全选框  判断全选框的checked是否为真  为真   遍历所有子选框  设置所有子选框的checked=true;  true不用加""
         *
         *
         */
        my$("j_cbAll").onclick=function(){
                if(j_cbAll.checked)
                {
                        for(var i=0;i<all.length;i++)
                        {
                                all[i].checked=true;
                        }       
          }
                else{
                                for(var i=0;i<all.length;i++)
                                {
                                        all[i].checked=false;
                                }       
                        }
                }
        //实现2  选择所有的子选框 全选框勾选
        var arr=[];
                for(var i=0;i<all.length;i++)
                {
                        all[i].onclick=function(){
                                 //思路过程
                                 /**
                                        * 创建数组
                                        * 点击每个子选框  
                                        * 1.数组清零
                                        * 2.fou循环所有自选框  判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面
                                        * 3.判断新的数组长度是否等于子选框数组长度  是的话 全选框被选中(my$("j_cbAll").checked=true)  否则相反
                                        */
                                 arr=[];
                                for(var i=0;i<all.length;i++)
                                         if(all[i].checked)
                                        {
                                                arr.push(all[i]);
                                        }       
                                       
                               
                                console.log(arr.length);
                                if(arr.length==all.length){
                                        my$("j_cbAll").checked=true;
                                }
                                else{
                                        my$("j_cbAll").checked=false;
                                }
                        }
               
                }
               
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
  $(function () {

    $("#j_cbAll").click(function () {
      //修改下面的哪些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否
    });

    $("#j_tb input").click(function () {

      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }

    });

  });
</script>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>

    </tbody>
  </table>
</div>

<script type="text/javascript">
        function my$(id)
        {
                return document.getElementById(id);
        }
       
        var all=my$("j_tb").getElementsByTagName("input");
        // alert(all.length);
        //实现1  点击全选  子选框都得被全选
       
        /**
         *
         * 点击全选框  判断全选框的checked是否为真  为真   遍历所有子选框  设置所有子选框的checked=true;  true不用加""
         *
         *
         */
        my$("j_cbAll").onclick=function(){
                if(j_cbAll.checked)
                {
                        for(var i=0;i<all.length;i++)
                        {
                                all[i].checked=true;
                        }       
          }
                else{
                                for(var i=0;i<all.length;i++)
                                {
                                        all[i].checked=false;
                                }       
                        }
                }
        //实现2  选择所有的子选框 全选框勾选
        var arr=[];
                for(var i=0;i<all.length;i++)
                {
                        all[i].onclick=function(){
                                 //思路过程
                                 /**
                                        * 创建数组
                                        * 点击每个子选框  
                                        * 1.数组清零
                                        * 2.fou循环所有自选框  判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面
                                        * 3.判断新的数组长度是否等于子选框数组长度  是的话 全选框被选中(my$("j_cbAll").checked=true)  否则相反
                                        */
                                 arr=[];
                                for(var i=0;i<all.length;i++)
                                         if(all[i].checked)
                                        {
                                                arr.push(all[i]);
                                        }       
                                       
                               
                                console.log(arr.length);
                                if(arr.length==all.length){
                                        my$("j_cbAll").checked=true;
                                }
                                else{
                                        my$("j_cbAll").checked=false;
                                }
                        }
               
                }
               
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
  $(function () {

    $("#j_cbAll").click(function () {
      //修改下面的哪些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否
    });

    $("#j_tb input").click(function () {

      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }

    });

  });
</script>
-->
</body>
</html>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马