jQuery：チェックボックスの選択作業を行うにはどうすればいいですか

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() { 
 
\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/

3部、確認の値を取得するための1があります。

$('#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がループされ、値が配列に追加されます。

2番目の部分はすべてチェック用です。すべてのチェックボックスをチェックボックスのプロパティ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>