проверить все флажки javascript

Question

Я пытаюсь проверить все флажки (true), когда пользователь нажимает кнопку «Все». Я попробовал это, во-первых, просто чтобы увидеть, если «Английской» можно проверить, нажав на «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 

Мой 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; 
    } 

Но кнопка (ы) не проверяется, когда я нажимаю на все. Я думаю, что я не понимаю, как именно использовать метод .Checked ..
Может быть, некоторые из моего кода не имеет логики, потому что он был из этого примера: https://www.hscripts.com/scripts/JavaScript/select-all-checkbox.php

Answer 1

Пара модификаций:

• Перейдите в поле all к методу checkedAll (это позволяет вам ссылаться на него без необходимости его повторного поиска).
• Используется document.getElementsByTagName найти другие поля, но вы можете так же легко использовать document.getElementById для каждого из них (anglais, allemand и т.д.)
• Установить checked статус каждого другого CheckBox к значению all.checked. Не нужно сравнивать истину/ложь.

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

Более явным образом будет:

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