CODEWITHSUNDEEP
javascripthtmlcheckbox
Isador
Isador

Reputation: 603

check all checkboxes javascript

I'm trying to have all checkboxes checked (true) when the user clicks on "All" button. I tried this, firstly just to see if "Anglais" could be checked clicking on "All" : 

<input type="checkbox" name="anglais"  id="anglais"  value="Anglais"  /> Anglais
<input type="checkbox" name="allemand" id="allemand" value="Allemand" /> Allemand
<input type="checkbox" name="espagnol" id="espagnol" value="Espagnol" /> Espagnol
<input type="checkbox" name="francais" id="francais" value="Francais" /> Francais
<input type="checkbox" onclick="checkedAll()" name="all"      id="all"      value="Tous"     /> Tous

My Javascript : 

function checkedAll () {
var checked = false;
var all = document.getElementById('all');
if (checked == false) {
    checked = true
}
else {
    checked = false
}
var ang = document.getElementById('anglais').checked
if (ang == true) {
    ang.checked = true;
    }

But the button(s) are not checked when I click on All. I think I don't understand exactly how to use the .checked method..
Maybe, some of my code has not logic, because it was from this example : https://www.hscripts.com/scripts/JavaScript/select-all-checkbox.php

Upvotes: 0

Views: 2135

Answers (1)

Brad Christie
Brad Christie

Reputation: 101614

Couple modifications:

  • Pass in the all checkbox to the checkedAll method (this allows you to reference it without having to re-find it).
  • Used document.getElementsByTagName to find the other checkboxes, but you could just as easily use document.getElementById for each one (anglais, allemand, etc.)
  • Set every other checkbox's checked status to the all.checked value. No need for a true/false comparison.

function checkedAll(allCheckbox){
  var allCheckboxes = document.getElementsByTagName('input');
  for (var i = 0; i < allCheckboxes.length; i++){
    var curCheckbox = allCheckboxes[i];
    if (curCheckbox.id != 'all'){
      curCheckbox.checked = allCheckbox.checked;
    }
  }
}
<input type="checkbox" name="anglais"  id="anglais"  value="Anglais"  /> Anglais
<input type="checkbox" name="allemand" id="allemand" value="Allemand" /> Allemand
<input type="checkbox" name="espagnol" id="espagnol" value="Espagnol" /> Espagnol
<input type="checkbox" name="francais" id="francais" value="Francais" /> Francais
<input type="checkbox" onclick="checkedAll(this)" name="all" id="all" value="Tous" /> Tous

The more explicit way would be:

function checkedAll(){
  var isAllChecked = document.getElementById('all').checked;
  
  // Set the other checkboxes .checked property based on the
  // .checked status of the `all` checkbox
  document.getElementById('anglais').checked = isAllChecked;
  document.getElementById('allemand').checked = isAllChecked;
  document.getElementById('espagnol').checked = isAllChecked;
  document.getElementById('francais').checked = isAllChecked;
}
<input type="checkbox" name="anglais"  id="anglais"  value="Anglais"  /> Anglais
<input type="checkbox" name="allemand" id="allemand" value="Allemand" /> Allemand
<input type="checkbox" name="espagnol" id="espagnol" value="Espagnol" /> Espagnol
<input type="checkbox" name="francais" id="francais" value="Francais" /> Francais
<input type="checkbox" onclick="checkedAll()" name="all" id="all" value="Tous" /> Tous

Upvotes: 1

Related Questions