鍍金池/ 問答/Java  PHP  Python  HTML/ checkbox全選時，如何讓子checkbox全選中時,全選checkbox自

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

問題

因為用的是layui框架，要獲得checkbox==checked 的總個數(shù)，所以要用到class用控制

  1. checkbox全選時，如何讓子checkbox全選中時,全選checkbox自動為checked,就是選中狀態(tài)
  2. 如果有一個子checkbox沒有選中，全選就自動變?yōu)椴贿x中狀態(tài)

未選狀態(tài) class="layui-unselect layui-form-checkbox"

clipboard.png

選中狀態(tài) class="layui-unselect layui-form-checkbox layui-form-checked"

clipboard.png

單個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>

clipboard.png

clipboard.png

回答
編輯回答
愚念

$("#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);
  })
2017年3月30日 15:48
編輯回答
筱饞貓

不用每次選中checkbox時計算數(shù)量，當(dāng)最后一個子checkbox選中時，計算數(shù)量是否等于所有選項，如果相等即全選，可以有效避免重復(fù)計算

2017年4月15日 17:46
編輯回答
雅痞

單全選

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');  
          });
          
          
          以前寫過一個你看下
2018年9月10日 16:39
編輯回答
不討囍

基本思路就是，給每個子checkbox加change事件，每次子checkbox選中或未選中時，去計算其被選中的數(shù)量，如果被選中的數(shù)量等于所有選項，則將全選的checkbox變?yōu)槿x

2017年11月23日 04:14
編輯回答
赱丅呿

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

<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>
2017年4月11日 11:13
編輯回答
旖襯

給子checkbox增加事件，每次操作，判斷子checkbox的數(shù)量 和 子checkbox的選中數(shù)量是否相等，相等即為全部選中了。

2017年10月12日 04:05