jQuery: Comment faire pour que la sélection fonctionne pour les cases à cocher

Question

J'ai le code suivant qui renvoie les valeurs pour les cases à cocher Comment sélectionner/désélectionner tout et obtenir toutes les valeurs sélectionnées?

<p><label><input type="checkbox" id="checkAll"/> Check all</label></p> 
<div id="checkboxlist"> 
    <div><input type="checkbox" value="1" class="chk"> Value 1</div> 
    <div><input type="checkbox" value="2" class="chk"> Value 2</div> 
    <div><input type="checkbox" value="3" class="chk"> Value 3</div> 
    <div><input type="checkbox" value="4" class="chk"> Value 4</div> 
    <div><input type="checkbox" value="5" class="chk"> Value 5</div> 
    <div> 
     <input type="button" value="Get Value" id="buttonClass"> 

    </div> 
</div> 

JS

$(document).ready(function() { 
    /* Get the checkboxes values based on the class attached to each check box */ 
    $("#buttonClass").click(function() { 
     getValueUsingClass(); 
    }); 

    /* Get the checkboxes values based on the parent div id */ 
    $("#buttonParent").click(function() { 
     getValueUsingParentTag(); 
    }); 
}); 




    function getValueUsingClass(){ 
     /* declare an checkbox array */ 
     var chkArray = []; 

     /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */ 
     $(".chk:checked").each(function() { 
      chkArray.push($(this).val()); 
     }); 

     /* we join the array separated by the comma */ 
     var selected; 
     selected = chkArray.join(',') + ","; 

     /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */ 
     if(selected.length > 1){ 
      alert("You have selected " + selected); 
     }else{ 
      alert("Please at least one of the checkbox"); 
     } 
    } 

Answer 1

$('#buttonClass').on('click', function() { 
 
\t var selVals = []; 
 
    $('#checkboxlist input[type=checkbox]:checked').each(function() { 
 
    \t selVals.push($(this).val()); 
 
    }); 
 
    
 
    alert("You selected " + selVals); 
 
}); 
 

 
$('#checkAll').on('click', function(){ 
 
\t $('#checkboxlist input[type=checkbox]').prop('checked', $(this).prop('checked')); 
 
}); 
 

 
$('#checkboxlist input[type=checkbox]').on('change', function(){ 
 
\t var allChecked = true; 
 
    $('#checkboxlist input[type=checkbox]').each(function(){ 
 
    \t if(!$(this).prop('checked')){ 
 
    \t allChecked = false; 
 
     return false; 
 
    } 
 
    }); 
 
    $('#checkAll').prop('checked', allChecked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label> 
 
    <input type="checkbox" id="checkAll" /> Check all</label> 
 
</p> 
 
<div id="checkboxlist"> 
 
    <div> 
 
    <input type="checkbox" value="1" class="chk"> Value 1</div> 
 
    <div> 
 
    <input type="checkbox" value="2" class="chk"> Value 2</div> 
 
    <div> 
 
    <input type="checkbox" value="3" class="chk"> Value 3</div> 
 
    <div> 
 
    <input type="checkbox" value="4" class="chk"> Value 4</div> 
 
    <div> 
 
    <input type="checkbox" value="5" class="chk"> Value 5</div> 
 
    <div> 
 
    <input type="button" value="Get Value" id="buttonClass"> 
 

 
    </div> 
 
</div>

DEMO: https://jsfiddle.net/zf2obcLd/2/

Il y a 3 parties, l'une pour obtenir les valeurs cochés:

$('#buttonClass').on('click', function() { 
    var selVals = []; 
    $('#checkboxlist input[type=checkbox]:checked').each(function() { 
    selVals.push($(this).val()); 
    }); 

    alert("You selected " + selVals); 
}); 

Lorsque nous cliquons sur toutes les cases cochées input[type=checkbox]:checked, nous ajoutons la valeur à un tableau.

La deuxième partie est pour vérifier tout, nous changeons toutes les cases à cocher pour correspondre à la propriété checked de la case tout cocher.

$('#checkAll').on('click', function(){ 
    $('#checkboxlist input[type=checkbox]').prop('checked', $(this).prop('checked')); 
}); 

le troisième est la façon dont vous cochez la case « cocher toutes » s'ils étaient tous contrôlés manuellement, et non vérifier si au moins l'un d'entre eux obtient sans contrôle

$('#checkboxlist input[type=checkbox]').on('change', function(){ 
    var allChecked = true; 
    $('#checkboxlist input[type=checkbox]').each(function(){ 
    if(!$(this).prop('checked')){ 
     allChecked = false; 
     return false; 
    } 
    }); 
    $('#checkAll').prop('checked', allChecked); 
}); 

Answer 2

Si vous voulez obtenir vous pouvez le faire comme la valeur de toutes les cases sélectionné:

$(document).ready(function(){ 
 
     $('#buttonClass').click(function(){ 
 
      var checkedValues = $('input:checkbox:checked').map(function() { 
 
          return this.value; 
 
      }).get(); 
 

 
      console.log(checkedValues); 
 
     }); 
 
    
 
    
 
     $('#checkAll').click(function(){ 
 
      $(".chk").prop('checked', $(this).prop('checked')); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p> 
 
<div id="checkboxlist"> 
 
    <div><input type="checkbox" value="1" class="chk"> Value 1</div> 
 
    <div><input type="checkbox" value="2" class="chk"> Value 2</div> 
 
    <div><input type="checkbox" value="3" class="chk"> Value 3</div> 
 
    <div><input type="checkbox" value="4" class="chk"> Value 4</div> 
 
    <div><input type="checkbox" value="5" class="chk"> Value 5</div> 
 
    <div> 
 
     <input type="button" value="Get Value" id="buttonClass"> 
 
     
 
    </div> 
 
</div>