CODEWITHSUNDEEP
javascripthtmlcheckboxonclick
Ihidan
Ihidan

Reputation: 568

Toggle multiple Checkbox at once

I have these checkboxs:

'<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">'; 
'<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">'; 
'<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">';

Which I can check or uncheck by clinking on them.
Now I am trying to add one more checkbox, which will check or uncheck all previous checkbox at once when clicking.

'<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">'

What is the JS code to execute when clicking the checkbox to check or uncheck all checkbox "toggleable" at once?

Upvotes: 0

Views: 3157

Answers (3)

divy3993
divy3993

Reputation: 5810

Just verify through JS that if particular checkbox checked. It has to check all of them.

JS Demo Below: UPDATE

Just added id to your inputs.

function checkAll(x) {
  if(x.checked == true){
  	document.getElementById('c1').checked = true;
  	document.getElementById('c2').checked = true;
  	document.getElementById('c3').checked = true;      
  }else{
  	document.getElementById('c1').checked = false;
  	document.getElementById('c2').checked = false;
  	document.getElementById('c3').checked = false;    
  }
}
Multiple Check Box Below:
<br>
<input type="checkbox" name="checkBox1" value="checked" class="toggleable" id="c1">
<input type="checkbox" name="checkBox2" value="checked" class="toggleable" id="c2">
<input type="checkbox" name="checkBox3" value="checked" class="toggleable" id="c3">
</br>
Check below to Check them all:
</br>
<input type="checkbox" name="check_uncheck_all" onchange='checkAll(this);' value="false" id="id_check_uncheck_all">

JQuery Demo below:

$('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" > Check All
</br>
<input type="checkbox" id="checkItem"> Item 1
<input type="checkbox" id="checkItem"> Item 2 
<input type="checkbox" id="checkItem"> Item3

Upvotes: 0

SpiRT
SpiRT

Reputation: 692

try it

$(document).ready(function() {
  
    $(".toggleable").click(function() {
      
        var checkboxes = $(".toggleable");
      
        if($(this).prop("checked")) checkboxes.prop("checked",true);
        else checkboxes.prop("checked",false);
      
    })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="checkBox1" class= "toggleable">
<input type="checkbox" name="checkBox2" class= "toggleable"> 
<input type="checkbox" name="checkBox3" class= "toggleable">

Upvotes: 0

Dave
Dave

Reputation: 10924

Here's an example on how to make this work in pure JavaScript.

var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
  var checked = this.checked;
  var otherCheckboxes = document.querySelectorAll(".toggleable");
  [].forEach.call(otherCheckboxes, function(item) {
    item.checked = checked;
  });
});
<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
<br/>

<input type="checkbox" name="checkBox1" value="checked" class= "toggleable"> 
<input type="checkbox" name="checkBox2" value="checked" class= "toggleable"> 
<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">

Upvotes: 5

Related Questions