javascript - jQuery：如何使 selectall 对复选框起作用

Question

我有以下代码返回复选框的值如何全选/取消全选并获取所有选定的值？

 <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() {
	var selVals = [];
  $('#checkboxlist input[type=checkbox]:checked').each(function() {
  	selVals.push($(this).val());
  });
  
  alert("You selected " + selVals);
});

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

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

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

There are 3 parts, one for getting the checked values:

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

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

On click we loop through all the checked checkboxes input[type=checkbox]:checked then we add the value to an array.

The second part is for check all, we change all the checkboxes to match the property checked of the check all box.

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

the third is how you check the "check all" button if they were all manually checked, and un-check it if at least one of them gets unchecked

$('#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

如果要获取所有选中复选框的值，可以这样做：

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