如何同时选中取消选中的复选框答案

【问题标题】：How to check uncheck checkbox all at the same time如何同时选中取消选中的复选框
【发布时间】：2016-03-04 23:31:33
【问题描述】：

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

<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。

【问题讨论】：

你可以使用纯JS或者jQuery。
从一些介绍性的 JavaScript 开始。您要做的是创建一个元素以单击“全选”，将单击事件处理程序附加到该元素，并在该处理程序中设置所有复选框的选中状态。这些功能中的每一个都可以在 Google 上轻松找到。
all checkboxes need to be checked and unchecked with the main checkbox的可能重复

标签： javascript html

【解决方案1】：

你可以做这样的事情（jQuery）：

$("#checkall").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

只需将id 属性添加到复选框：

<input type="checkbox" id="checkall" name="checkall" value="checkall">

【讨论】：

【解决方案2】：

为您的复选框创建一个类并使用 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>

【讨论】：

【解决方案3】：

如果您将值为“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>

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

这是上面正在运行的代码的JSFiddle。

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

【讨论】：