Tag:javascriptphpjavapythonnode.js
Article From:https://segmentfault.com/q/1010000012141680
Question:

problem

Because the layui framework is used to get the total number of checkbox==checked, so class control is needed.

  1. checkboxWhen fully selected, how to make sub checkbox fully selected, the fully selected checkbox is automatically checked, that is, the selected state.
  2. If a sub checkbox is not selected, the full selection automatically becomes unchecked.

The state class= “layui-unselect layui-form-checkbox” is not selected.

Select the status class= “layui-unselect layui-form-checkbox layui-form-checked”.

Single checkbox

<span class="layui-form">
    <input type="checkbox"  lay-filter="jie" lay-skin="primary">
</span>

Full selection of 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;
        //Monitor table check box selectionForm.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>

Complete code

<!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">
    <!--Test question -->< 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>(reading comprehension); < /span> do you do how do you dohow do you doDo you dohow do you dohow do you do do you doW do you dohow do you dohow do you dohow do youHow do you dohow do you dohow do you dohow do youDohow do you dohow do you dohow do you dohow do youYou dohow do you dohow do you dohow do you dohow you< /div>< div class= "test-content" >< div class= "Content-title ">< span> () < /span> 1. how do you do do, do you do< /div>< div class= "content-select Clearfix" >< span class= "select-item" > A. how do you do< /span>< spanClass= "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 youDo< /span>< /div>< div class= "content-answer" >Answer: A< /div>< div class= "content-analysis">Parsing: statement path, structure analysis< /div>< /div>< div class= "test-content" >< div class= "content-title" >< span> () < /span> 1. how do you do 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" >Answer: A< /div>< div class= "content-analysis" >Parsing: statementPassage and structure analysis< /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" >Answer: A< /div>< div class= "content-analysis" >Parsing: statement path, structure analysis< /diV>< /div>< div class= "test-difficult" >< bUtton class= "layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue" > average difficulty 4.0< /buttOn>< button class= "layui-btn layui-btn-primary layui-btn-mini jie-btn-radius J"Ie-blue "> 2013 Jiangxi volume < /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> (reading comprehension) < /span> do you do how doYou dohow do you dohow do you dohow do you dohow doO you do how do you dohow do you dohow do youHow do you do do you do how do you dohow doDohow do you dohow do you do do you do how doU dohow do you dohow do you dohow do you dohow doYou dohow do you dohow do you dohow do you dohow doO you dohow do you dohow do you dohow do you dohowDo you do how do you dohowdo you do how do youOHow do you dohow do you dohow do you do do youDohow do you dohow do you dohow do you dohow do youOu dohow do you dohow do you dohow do you dohow doYou dohow do you dohow do you dohow do you dohow doOw do you dohow do you dohow do you dohow do youDo< /div>< div class= "test-content" >< div ClAss= "content-title" >< span> () < /span> 1. how do you do 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" >Answer: A< /div>< div class= "content-analYsis ">Parsing: statement path, structure analysis< /div>< /div>< div class= "test-content" >< div class= "content-title" >< span> () < /span> 1. how do you do do, do you do< /div&gT;< 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" >Answer: A< /div>< div class= "content-analysis" >solutionAnalysis: statement passage and structure analysis< /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>&lT; span class= "select-item" > D. how do you do< /span>< /div>< div class= "content-answer" >Answer: A< /div>< div class= "content-analysis" >Parsing: statement path, structure analysis&lT; /div>< /div>< div class= "test-difficult" >< button class= "layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue" > average difficulty 4.0</button>< button class= "layui-btn layui-btn-primary layui-btn-mini jie-btn-radIUS jie-blue "> 2013 Jiangxi volume < /button>< /div>< /div>< /div&gT;< div class= "jie-test-item" >< div class= "left-box" >< spanClass= "layui-form" >< input type= "checkbox" lay-filter= "Jie" lay-skin= "primar"Y ">< /span>< /div>< div class= "right-box" >< div class= "test-title omit" >< span> (reading comprehension) < /span> do you do hOw do you dohow do you dohow do you dohow do youDo do you do how do you dohow do you dohow doOu dohow do you do do you do how do you dohowYou dohow do you dohow do you do do you do howDo you dohow do you dohow do you dohow do you dohowOHow do you dohow do you dohow do you dohow do dohow< /div>< div class= "test-content" >< div class= "content-title" >< span> () < /span> 1. how do you do 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 doYou do< /span>< span class= "select-item" > C. how do you do< /span&gT;< span class= "select-item" > D. how do you do< /span>< /div>< div class= "content-answer" >Answer: A< /div>< div class= "content-analysis" >Parsing: statement passRoad, structure analysis< /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>< spanClass= "select-item" > D. how do you do< /span>< /div>≪ div class= "content-answer" >Answer: A< /div>< div class= "content-analysis" >Parsing: statement path, structure analysis< /div>< /div>< div class= "test-content" >< div CLass= "content-title" >< span> () < /span> 1. how do you do 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. howDo you do< /span>< /div>< div class= "content-answer" &gT;Answer: A< /div>< div class= "content-anaLysis ">Parsing: statement path, structure analysis< /div>< /div>< div class= "test-difficult" >< button class= "layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue ">"; average difficulty 4.0< /button>< buttoN class= "layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue" > 2013 Jiangxi volume < /button&gT;< /div>< /div>< /div><! - - paging -->< div CLass= "pages" >< div class= "left-box" ><! -- full selection of -->< 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" > home page < /buTton>< button class= "layui-btn layui-btn-small layui-btn-primary" > last page < /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" > next page < /button>< button clasS= "layui-btn layui-btn-small layui-btn-primary" > last page < /button>< button class= "LAyui-btn layui-btn-small layui-btn-primary ">"; a total of 8 pages < /button>< /div>< /div>< div class= "already-select" >< button class= "layui-btn layui-btn-normal layUi-btn-small jie-btn-radius "> has chosen (< span id=" checkNumber "> 0< /span>" road < /span>< button class= "layui-btn layui-btn-primary layui-btn-small jie-blue jie-btn-radius" > return< /button>< /div>< /section>< script src= "js/jquery-1.11.3.js" > < /scriPt>< script src= "layui/layui.js" > < /script>< script>Layui.use ('form', funct)Ion () {Var form = layui.form;/ / monitor table check box selection/ / / single electionForm.on ('checkbox (Ji)E) ', 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');});/ / full selectionForm.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><! - the test paper starts to take up the -->< script>$(function () {()$('.jie-test.Jie-test-item.Right-box.Test-title').Click (function () {$(this).SIblings ('.test-content').SlideToggle ();$(this).ToggleClass ("omit");})})≪ /script>< /body>< /html>

Reedit

  <!--Single -->< span class= "layui-form" >< input type= "checkbox" lay-Filter= "Jie" lay-skin= "primary" >< /span>
   <!--Full selection of -->< 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;
        //Monitor table check box selection/ / / single electionForm.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');});/ / full selectionForm.on ('checkbox (Ji)EAll) ', 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>

Answer 0:

Single total selection

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');  
      });
      
      
      Total selection of subelementsVar $check=0;Form.on ('checkbox (child) ', function (data) {)/ / / / find the parent element full selection buttonVar parent = $('.pro_topbtn').Find ('.checkall');If (data.elem.checked) {$check++;}else{$check--;}/ / this is the length of the class of the subelementIf ($check == = $('.childinp').Length) {$('.checkall') [0].checked = data.elem.checked;}else{$('.checkall') [0].checked = false}Form.render ('checkbox');});I've written one of you before

Answer 1:

$(“#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);
  })

Answer 2:

I didn’t quite understand what you wanted. I wrote it briefly.

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

Answer 3:

Add an event to the child checkbox, each operation, judgeThe number of sub checkbox and the number of sub checkbox checks.Whether equal, equal is all selected.

Answer 4:

The basic idea is to add the change event to each sub checkbox, to calculate the number of selected items each time the sub checkbox is selected or unselected, and if the selected number is equal to all the options, the total selected checkbox is changed into the total selection.

Answer 5:

Do not calculate the number of checkbox every time it is selected. When the last sub checkbox is selected, the number of calculations is equal to all options, and if the equality is all, it can effectively avoid repeated calculations.

Leave a Reply

Your email address will not be published. Required fields are marked *