Javascript 如何同时选中全部取消选中复选框

我只想用一个复选按钮选中/取消选中所有选项

<form action="process.php" method="post">

<p> Select pet: </p>
<p> <input type="checkbox" name="dog" value="dog"> Dog </p>
<p> <input type="checkbox" name="cat" value="cat"> Cat </p>
<p> <input type="checkbox" name="bird" value="Tbird"> Bird </p>
<p> <input type="checkbox" name="checkall" value="checkall"> All </p>

选择宠物：

狗

猫

鸟

全部

---

我缺少什么代码？如果用户选择了“全部”，我需要“全部”取消选中/选中所有选项。我用xampp来做这个

您可以这样做（jQuery）：

只需将

id

属性添加到复选框：

---

为您创建一个类复选框并使用Javascript：

<form .....>
    <input type="checkbox" class="myCheckboxes" name="dog" value="dog" />
    <!--rest of the checkboxes with the same class name but different names and values follow-->
    <button type="button" class="checkedAll">Check All</button>
</form>

<script type="text/javascript">
    (function() {
        var checked = false;
        $('button.checkedAll').click(function() {
            checked = !checked;
            $('.myCheckboxes').prop('checked', checked);
            if (checked) $(this).text('Uncheck All');
            else $(this).text('Check All);
        });
    })();
</script>

全部检查
（功能（）{
var检查=假；
$（'button.checkedAll'）。单击（函数（）{
选中=！选中；
$（'.mycheckbox'）.prop（'checked'，'checked'）；
如果（选中）$（此）.text（'Uncheck All'）；
else$（this）.text（'全部选中）；
});
})();

如果将值为“petForm”的id属性添加到表单元素中

<form id="petForm" action="process.php" method="post">

您可以使用以下纯Javascript

<script>
  document.addEventListener("DOMContentLoaded", function(event) { 
    var form = document.getElementById("petForm");

    if (form) {
      var checkAll = form.querySelector("input[type='checkbox'][name='checkall']");
      var checkBoxes = form.querySelectorAll("input[type='checkbox']:not([name='checkall'])");

      checkAll.addEventListener("change", function(e) {
        for (checkBox of checkBoxes) {
          checkBox.checked = this.checked;
        }
      });
    }
  }
</script>

addEventListener（“DOMContentLoaded”，函数（事件）{
var form=document.getElementById（“petForm”）；
如有需要（表格）{
var checkAll=form.querySelector（“输入[type='checkbox'][name='checkAll']”）；
var checkbox=form.querySelectorAll（“输入[type='checkbox']：非（[name='checkall']）”；
checkAll.addEventListener（“更改”，函数（e）{
用于（复选框中的复选框）{
checkBox.checked=this.checked；
}
});
}
}

它将事件侦听器添加到等待加载DOM的文档中，然后通过添加的id属性标识表单。如果找到表单，则将“checkall”输入元素和表单中checkbox类型的所有其他输入元素存储在两个不同的变量中。之后，它将on change事件侦听器添加到“checkall”复选框输入元素，用于将表单中的所有其他复选框输入元素设置为与checkall复选框输入元素相同的值

下面是上面运行的一段代码

---

如果表单包含不希望被checkall复选框选中的其他复选框，则需要修改复选框的填充方式。同样，如果有多个复选框集合，则需要找到区分它们的方法。

您可以使用纯JS进行此操作或使用jQuery。从一些介绍性内容开始vaScript。您要做的是创建一个元素以单击“全选”，将一个单击事件处理程序附加到该元素，并在该处理程序中设置所有复选框的选中状态。这些功能中的每一项都可以在Google上轻松找到。可能重复

<script>
  document.addEventListener("DOMContentLoaded", function(event) { 
    var form = document.getElementById("petForm");

    if (form) {
      var checkAll = form.querySelector("input[type='checkbox'][name='checkall']");
      var checkBoxes = form.querySelectorAll("input[type='checkbox']:not([name='checkall'])");

      checkAll.addEventListener("change", function(e) {
        for (checkBox of checkBoxes) {
          checkBox.checked = this.checked;
        }
      });
    }
  }
</script>