"selecting all" 复选框的 onClick 按钮功能

Question

我如何为 select 按钮制作 javascript 并取消 select 所有复选框？

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

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

我的按钮：

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

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

Answer 2

为您希望按钮影响的所有复选框添加名称="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">

该函数基本上做的是获取所有具有 'movieboxes' 名称的元素，循环每个元素并翻转他的值（从真到假，从假到真）

您的整个 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;
            }
        }

"selecting all" 复选框的 onClick 按钮功能

onClick button function for a "selecting all" toggle on checkboxes

html

javascript

checkbox

button

toggle