首頁猿問 checkbox全選時，如何讓子c...

checkbox全選時，如何讓子checkbox全選中時,全選checkbox自動為checked

PHP

繁華開滿天機(jī) 2019-03-18 09:26:11

問題因為用的是layui框架，要獲得checkbox==checked 的總個數(shù)，所以要用到class用控制 checkbox全選時，如何讓子checkbox全選中時,全選checkbox自動為checked,就是選中狀態(tài) 如果有一個子checkbox沒有選中，全選就自動變?yōu)椴贿x中狀態(tài) 未選狀態(tài) class="layui-unselect layui-form-checkbox" 選中狀態(tài) class="layui-unselect layui-form-checkbox layui-form-checked" 單個checkbox <span class="layui-form"> <input type="checkbox" lay-filter="jie" lay-skin="primary"> </span> 全選checkbox <span id="checkAll" class="layui-form"> <input type="checkbox" lay-filter="jie" lay-skin="primary"> </span> jquery <script> layui.use('form', function(){ var form = layui.form; //監(jiān)聽表格復(fù)選框選擇 form.on('checkbox(jie)', function(){ var number = $(".jie-test-item .layui-form-checked").length; var numbers = $(".jie-test-item .layui-form-checkbox").length; var checks = $(".jie-test-item .layui-form-checkbox"); var checkAll = $("#checkAll"); $('#checkNumber').html(number); console.log($('#checkNumber').html(number)); $("#checkAll").click(function(){ if(checkAll.children("div").hasClass("layui-form-checked")){ checks.addClass("layui-form-checked"); $('#checkNumber').html(numbers); }else{ checks.removeClass("layui-form-checked"); $('#checkNumber').html(0); } }) }); }); </script> 完整代碼 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css"/> <link rel="stylesheet" href="layui/css/layui.css"/> <link rel="stylesheet" href="css/jie.css"/> </head> <body> <section id="checkbox" class="jie-test">  <div class="jie-test-item"> <div class="left-box">  <span class="layui-form"> <input type="checkbox" lay-filter="jie" lay-skin="primary"> </span> </div> <div class="right-box"> <div class="test-title omit"> <span>(閱讀理解)</span> do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-difficult"> <button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">平均難度4.0</button> <button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">2013江西卷</button> </div> </div> </div> <div class="jie-test-item"> <div class="left-box"> <span class="layui-form"> <input type="checkbox" lay-filter="jie" lay-skin="primary"> </span> </div> <div class="right-box"> <div class="test-title omit"> <span>(閱讀理解)</span> do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohowdo you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohowdo you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-difficult"> <button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">平均難度4.0</button> <button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">2013江西卷</button> </div> </div> </div> <div class="jie-test-item"> <div class="left-box "> <span class="layui-form"> <input type="checkbox" lay-filter="jie" lay-skin="primary"> </span> </div> <div class="right-box"> <div class="test-title omit"> <span>(閱讀理解)</span> do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-content"> <div class="content-title"> <span>( )</span> 1. how do you do ____ do you do </div> <div class="content-select clearfix"> <span class="select-item">A. how do you do</span> <span class="select-item">B. how do you do</span> <span class="select-item">C. how do you do</span> <span class="select-item">D. how do you do</span> </div> <div class="content-answer"> 答案: A </div> <div class="content-analysis"> 解析: 語句通路，結(jié)構(gòu)淺析 </div> </div> <div class="test-difficult"> <button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">平均難度4.0</button> <button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">2013江西卷</button> </div> </div> </div>  <div class="pages"> <div class="left-box">  <span id="checkAll" class="layui-form"> <input type="checkbox" lay-filter="jieAll" lay-skin="primary"> </span> </div> <div class="right-box"> <button class="layui-btn layui-btn-small layui-btn-primary">首頁</button> <button class="layui-btn layui-btn-small layui-btn-primary">上一頁</button> <div class="layui-btn-group"> <button class="layui-btn layui-btn-normal layui-btn-small ">1</button> <button class="layui-btn layui-btn-primary layui-btn-small">2</button> <button class="layui-btn layui-btn-primary layui-btn-small">3</button> </div> <button class="layui-btn layui-btn-small layui-btn-primary">下一頁</button> <button class="layui-btn layui-btn-small layui-btn-primary">末頁</button> <button class="layui-btn layui-btn-small layui-btn-primary">總共8頁</button> </div> </div> <div class="already-select"> <button class="layui-btn layui-btn-normal layui-btn-small jie-btn-radius">已經(jīng)選擇 (<span id="checkNumber">0</span>) 道</button> <button class="layui-btn layui-btn-primary layui-btn-small jie-blue jie-btn-radius">返回</button> </div> </section> <script src="js/jquery-1.11.3.js"></script> <script src="layui/layui.js"></script> <script> layui.use('form', function() { var form = layui.form; //監(jiān)聽表格復(fù)選框選擇 // 單選 form.on('checkbox(jie)', function (data) { var child = $('.jie-test-item').find('input[type="checkbox"]'); child.each(function(){ var number = child.filter(':checked').length; $("#checkNumber").html(number); }) form.render('checkbox'); }); // 全選 form.on('checkbox(jieAll)', function (data) { var child = $('.jie-test-item').find('input[type="checkbox"]'); child.each(function (index,item) { item.checked = data.elem.checked; var number = child.filter(':checked').length; $("#checkNumber").html(number); }); form.render('checkbox'); }); }); </script>  <script> $(function(){ $('.jie-test .jie-test-item .right-box .test-title').click(function(){ $(this).siblings('.test-content').slideToggle(); $(this).toggleClass("omit"); }) }) </script> </body> </html> 重新編輯  <span class="layui-form"> <input type="checkbox" lay-filter="jie" lay-skin="primary"> </span>  <span id="checkAll" class="layui-form"> <input type="checkbox" lay-filter="jieAll" lay-skin="primary"> </span> <script> layui.use('form', function() { var form = layui.form; //監(jiān)聽表格復(fù)選框選擇 // 單選 form.on('checkbox(jie)', function (data) { var child = $('.jie-test-item').find('input[type="checkbox"]'); child.each(function(){ var number = child.filter(':checked').length; $("#checkNumber").html(number); }) form.render('checkbox'); }); // 全選 form.on('checkbox(jieAll)', function (data) { var child = $('.jie-test-item').find('input[type="checkbox"]'); child.each(function (index,item) { item.checked = data.elem.checked; var number = child.filter(':checked').length; $("#checkNumber").html(number); }); form.render('checkbox'); }); }); </script>

查看完整描述

6 回答

慕姐8265434

TA貢獻(xiàn)1813條經(jīng)驗獲得超2個贊

單全選

form.on('checkbox(checkall)', function(data){  
        var child = $('.layui-table').find('tbody input[type="checkbox"]');  
        child.each(function(index, item){ 
          item.checked = data.elem.checked; 
        });  
        form.render('checkbox');  
      });
      
      
      子元素全選
      var $check=0;
       form.on('checkbox(child)', function(data){ 
       //找到父元素全選按鈕
           var parent = $('.pro_topbtn').find('.checkall'); 
            if(data.elem.checked){
        $check++;
      }else{
           $check--;
      }
         //這是子元素的class的length
      if ($check == $('.childinp').length) {
          $('.checkall')[0].checked = data.elem.checked; 
      }else{
      $('.checkall')[0].checked = false
  }
         form.render('checkbox');  
          });
          
          
          以前寫過一個你看下

反對回復(fù) 2019-03-18

慕森卡

TA貢獻(xiàn)1806條經(jīng)驗獲得超8個贊

$("#allChoose").click(function(){

    $(".chooseSingle").prop("checked",this.checked);
})
$(".chooseSingle").click(function(){
    var flag=true;
    $(".chooseSingle").each(function() {
        if (!this.checked) {
            flag=false;
        };
    });
     $("#allChoose").prop("checked",flag);
  })

反對回復(fù) 2019-03-18

茅侃侃

TA貢獻(xiàn)1842條經(jīng)驗獲得超22個贊

沒太看懂你想要的是什么我簡單寫了下你看看是你要得不

<body class="body_box">
    <div id="body">
        <div class="ind">
            <ul>
                <li> <input id='mycheckbox' type="checkbox"  lay-filter="jie" lay-skin="primary">1
                    <ul>
                        <li> <input type="checkbox"  lay-filter="jie" lay-skin="primary">1</li>
                        <li> <input type="checkbox"  lay-filter="jie" lay-skin="primary">2</li>
                    </ul>
                </li>
                <li> <input type="checkbox"  lay-filter="jie" lay-skin="primary">2</li>
            </ul>
        </div>
    
    </div>
</body>

</html>

<script type="text/javascript">
    $(function(){
        $('#mycheckbox').click(function(){
            if(typeof($(this).attr('checked')) == 'undefined'){
                $(this).next().find('input').removeAttr('checked');
                
            }else{
                $(this).next().find('input').attr('checked','checked');
            }
            
        })
        $('.ind ul li ul li input').click(function(){
            if(typeof($(this).attr('checked')) == 'undefined'){
                $(this).parent().parent().prev().removeAttr('checked');
                
            }
        })
    });

</script>

反對回復(fù) 2019-03-18