用于“全选”切换复选框的 onClick 按钮功能

Question

How would I go about making a javascript for a button to select and deselect all checkboxes?我将如何为按钮制作 javascript 以选择和取消选择所有复选框？

Checkbox HTML (they all look the same with a different value):复选框 HTML（它们看起来都一样，但值不同）：

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

My button:我的按钮：

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

Answer 1

Add a click event listener to your button and then toggle all the checkboxes when it's clicked.向按钮添加一个单击事件侦听器，然后在单击时切换所有复选框。

 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

Add name="movieboxes" for all the checkboxes you want the button to affect.为您希望按钮影响的所有复选框添加 name="movieboxes"。

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

Add onClick for the button添加 onClick 按钮

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

What the function basically does is get all the elements with the 'movieboxes' name and that loops everyone of them and flips his value (From true to false and from false to true)该函数的主要作用是获取所有带有“电影盒”名称的元素，然后循环每个元素并翻转他的值（从真到假，从假到真）

Your entire html file should look like this:您的整个 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>

Edit:编辑：

Added a variable so all the checkboxes will be synced according to its value, also added a tiny touch so the user know better that this is a toggle button and it does something different everytime.添加了一个变量，因此所有复选框都将根据其值进行同步，还添加了一个微小的触摸，以便用户更好地了解这是一个切换按钮，并且每次都会执行不同的操作。

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

用于“全选”切换复选框的 onClick 按钮功能

问题描述

2 个解决方案

解决方案1
1 2020-01-12 18:28:35

解决方案2
0 已采纳 2020-01-12 18:42:54

用于“全选”切换复选框的 onClick 按钮功能

问题描述

2 个解决方案

解决方案1 1 2020-01-12 18:28:35

解决方案2 0 已采纳 2020-01-12 18:42:54

解决方案1
1 2020-01-12 18:28:35

解决方案2
0 已采纳 2020-01-12 18:42:54