Question

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

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

我错过了哪些代码/代码？我需要＆＃34;所有＆＃34;如果用户选择了所有选项，则取消选中/选中所有选项。我使用xampp这个。

Answer 1

你可以这样做（jQuery）：

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

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

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

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

Answer 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”输入元素和类型checkbox的所有其他输入元素存储在两个不同的变量中。之后，它将一个on change事件监听器添加到“checkall”复选框输入元素，该元素将表单中的所有其他复选框输入元素设置为与checkall复选框输入元素相同的值。

以上是上面运行代码的JSFiddle。

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

如何同时选中取消选中复选框

3 个答案: