This post will discuss how to count the total number of checked checkboxes and unchecked checkboxes with values in JavaScript and jQuery.
Select AllOutput -
Source code
<input class="form-check-input" type="checkbox" name="update_userID" value="1" checked>
<input class="form-check-input" type="checkbox" name="update_userID" value="2" >
<input class="form-check-input" type="checkbox" name="update_userID" value="3" checked>
<input class="form-check-input" type="checkbox" name="update_userID" value="4" >
<input class="form-check-input" type="checkbox" name="update_userID" value="5" >
<input class="form-check-input" type="checkbox" name="update_userID" value="5" >
<br/>Output - <p class="output"> </p>
<script> $(document).ready(function(){
('#select-all').click(function(event) { if(this.checked) {
// Iterate each checkbox
$('input[name=update_userID]').each(function() { this.checked = true; }); } else { $('input[name=update_userID]').each(function() { this.checked = false; }); } });
$('input[name=update_userID]').change(function(){ var checkboxValues = []; var unchecked=[]; $('input[name=update_userID]').map(function() { if($(this).prop("checked")) checkboxValues.push($(this).val()); else{ unchecked.push($(this).val()); } }); console.log("Checked ="+checkboxValues +", Unchecked = "+unchecked); $(".output").html("Checked ="+checkboxValues +", Unchecked = "+unchecked); }); }); </script>
<input class="form-check-input" type="checkbox" name="update_userID" value="2" >
<input class="form-check-input" type="checkbox" name="update_userID" value="3" checked>
<input class="form-check-input" type="checkbox" name="update_userID" value="4" >
<input class="form-check-input" type="checkbox" name="update_userID" value="5" >
<input class="form-check-input" type="checkbox" name="update_userID" value="5" >
<br/>Output - <p class="output"> </p>
<script> $(document).ready(function(){
('#select-all').click(function(event) { if(this.checked) {
// Iterate each checkbox
$('input[name=update_userID]').each(function() { this.checked = true; }); } else { $('input[name=update_userID]').each(function() { this.checked = false; }); } });
$('input[name=update_userID]').change(function(){ var checkboxValues = []; var unchecked=[]; $('input[name=update_userID]').map(function() { if($(this).prop("checked")) checkboxValues.push($(this).val()); else{ unchecked.push($(this).val()); } }); console.log("Checked ="+checkboxValues +", Unchecked = "+unchecked); $(".output").html("Checked ="+checkboxValues +", Unchecked = "+unchecked); }); }); </script>
0 Comments