选中所有复选框 javascript

Question

我试图在用户单击 "All" 按钮时选中所有复选框 (true)。我尝试了这个，首先只是为了查看是否可以单击 "All" 检查 "Anglais" ：

<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 状态设置为 all.checked 值。无需 true/false 比较。

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

选中所有复选框 javascript

check all checkboxes javascript

html

javascript

checkbox