onClick 按钮功能，用于在复选框上“全选”切换答案

【问题标题】：onClick button function for a "selecting all" toggle on checkboxesonClick 按钮功能，用于在复选框上“全选”切换
【发布时间】：2020-04-29 14:00:43
【问题描述】：

我将如何为一个按钮制作一个 javascript 来选择和取消选择所有复选框？

复选框 HTML（它们看起来都一样，但值不同）：

<input type="checkbox" name="moviebox[]" value="Zombieland" style="width: 15px; height: 15px; margin: 0px;">

我的按钮：

<input type="button" value="Select All/None">

【问题讨论】：

标签： javascript html button checkbox toggle

【解决方案1】：

将click event listener 添加到您的按钮，然后在单击时切换所有复选框。

const button = document.querySelector(".select-all");
const checkboxes = document.querySelectorAll("input[type='checkbox']");
let everythingChecked;

button.addEventListener("click", () => {
  checkboxes.forEach(checkbox => {
    checkbox.checked = everythingChecked ? false : true;
  });
  everythingChecked = !everythingChecked
});

<input type="checkbox" name="foo">
<input type="checkbox" name="bar">
<input type="checkbox" name="baz">

<button type="button" class="select-all">
  Button
</button>

【讨论】：

【解决方案2】：

为您希望按钮影响的所有复选框添加 name="movieboxes"。

<input type="checkbox"  name="movieboxes" style="width: 15px; height: 15px; margin: 0px;"/> Zombieland<br/>

为按钮添加 onClick

<input type="button" onClick="toggleMovieBoxes()" value="Select All/None">

该函数的基本作用是获取所有名称为“moviebox”的元素，然后循环每个元素并翻转其值（从真到假，从假到真）

您的整个 html 文件应如下所示：

<html>
<head>
    <script language="JavaScript">
        function toggleMovieBoxes(){
            var movie_cbs = document.getElementsByName('movieboxes');
            for (var i=0, n=movie_cbs.length;i<n;i++) {
                movie_cbs[i].checked = !movie_cbs[i].checked;
            }
        }
    </script>
</head>

<body>
<input type="checkbox"  name="movieboxes" style="width: 15px; height: 15px; margin: 0px;"/> Zombieland<br/>
<input type="checkbox"  name="movieboxes" style="width: 15px; height: 15px; margin: 0px;"/> Zombieland 2<br/>
<input type="button" onClick="toggleMovieBoxes()" value="Select All/None">
</body>

</html>

编辑：

添加了一个变量，以便所有复选框将根据其值同步，还添加了一个微小的触摸，以便用户更好地知道这是一个切换按钮，并且每次都会做不同的事情。

var is_checked = false;
function toggleMovieBoxes(){
            var movie_cbs = document.getElementsByName('movieboxes');
            var button = document.getElementById('btn');

            is_checked = !is_checked;

            if(is_checked)
                 button.value = "Deselect all";
            else
     button.value = "Select all";

            for (var i=0, n=movie_cbs.length;i<n;i++) {
                movie_cbs[i].checked = is_checked;
            }
        }

【讨论】：

非常感谢！我注意到当我在按下按钮之前选择了复选框时，当按下按钮时这些复选框将被取消选中，并在再次按下按钮以取消全选后再次选中这些复选框。您是否知道是否有解决方案，无论预选哪个复选框，所有复选框都会同步？
谢谢！这很棒