check all checkboxes javascript

Question

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

Does it stores the actual status (true / false ? ) of checked for 'anglais' id ? — Isador
– Isador, Commented Mar 29, 2015 at 23:13
Well, according to your code - it's storing a boolean. But then 2 lines later you do ang.checked = true; like you're expecting it's not a boolean but a dom element there. — zerkms
– zerkms, Commented Mar 29, 2015 at 23:18

Brad Christie · Accepted Answer · 2015-03-29 23:10:49Z

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

Collectives™ on Stack Overflow

check all checkboxes javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related