选中所有复选框javascript

check all checkboxes javascript

本文关键字：复选框 javascript      更新时间：2023-09-26

当用户单击"全部"按钮时，我正在尝试选中所有复选框（true）。我试过了，首先只是想看看点击"全部"是否可以检查"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

耦合修改：

  • 将all复选框传递给checkedAll方法（这样您就可以引用它，而无需重新查找它）
  • 使用document.getElementsByTagName查找其他复选框，但您也可以很容易地为每个复选框使用document.getElementById（anglais、allemand等）
  • 将每隔一个复选框的checked状态设置为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

相关文章：