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/

共有3个部分，一个用于获取选中的值：

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

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

点击后，我们遍历所有选中的复选框input[type=checkbox]:checked，然后我们将值添加到数组中。

第二部分用于全部检查，我们更改所有复选框以匹配check all框的属性checked。

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

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>

jQuery：如何使selectall适用于复选框

2 个答案: