JavaScript to implement checkbox selection or cancellation

This article shares the specific code of JavaScript to select or cancel all checkboxes for your reference. The specific content is as follows

Implementation ideas

1. Get the total selection box and all small selection box element objects
2. Button control small buttons - bind the onclick event to the main checkbox, and the event handler - for loop iterates over all small checkboxes and assigns the checked attribute value of the main checkbox to them.
3. Small buttons affect the main button - - -The for loop binds the click event to each small check box, and each click checks whether all the check boxes are selected in the for loop:
Set a variable flag to control the selected state of the main button. The initial value is true. The for loop iterates and checks the selected state of each small check box. As long as one is not selected, flag = false, break jumps out of the loop and no longer checks the status of the following small check boxes. Finally, the checked attribute value of the main button = flag

Note: In HTML, the selected state is checked = "checked", but in JS, the selected state - - - checked = true; the unchecked state - - - checked = false;

Suggestion: For this kind of attribute value, you can print it in the console to see what the value is

Code Sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Selection Box</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }
        
        thead {
            color: #fff;
            background-color: #008dd0;
        }
    </style>
</head>

<body>
    <div class="box">
        <table border="1" cellspacing="0" cellpadding="5" width="200" align="center">
            <thead>
                <tr>
                    <th><input type="checkbox" value="0" id="cbAll"></th>
                    <th>Sports</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" value="1"></td>
                    <td>Running</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="2"></td>
                    <td>Rope skipping</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="3"></td>
                    Yoga
                </tr>
                <tr>
                    <td><input type="checkbox" value="4"></td>
                    <td>Swimming</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="5"></td>
                    Cycling
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var all = document.querySelector('#cbAll');
        var sports = document.querySelector('#tb').querySelectorAll('input');

        // Bind click event to the select all button all.onclick = function() {
            console.log(all.checked);
            for (var i = 0; i < sports.length; i++) {
                sports[i].checked = all.checked;
            }
        }

        // Bind click events to each small checkbox for (var i = 0; i < sports.length; i++) {
            sports[i].onclick = function() {
                // Control whether the select all button is selected var flag = true;
                // Each time a small box is clicked, check if all checkboxes are checked for (var i = 0; i < sports.length; i++) {
                    if (!sports[i].checked) {
                        flag = false;
                        break; // As long as one small checkbox is not selected, the Select All button is not selected, and the loop can be jumped out. The following small checkboxes do not need to be judged again}
                }
                all.checked = flag;
            }
        }
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements the functions of selecting all and deleting batches of check boxes
JS implements the function of selecting all, unselecting or unselecting all checkboxes
JS implements the function of selecting all and deselecting all in CheckBox
How to select all/unselect all checkboxes using js and jQuery
js realizes the effect of selecting and deselecting all checkboxes
js html css to achieve checkbox all selection and inverse selection
Detailed explanation of javascript to implement checkbox select all and reverse select events
javascript checkbox selection/select all special effects
How to implement the checkbox select all function in JS
Select and deselect all checkboxes based on JavaScript

<<: Several ways to connect tables in MySQL

>>: Detailed explanation of how to use Nginx + consul + upsync to achieve dynamic load balancing

Win10 configuration tomcat environment variables tutorial diagram

JavaScript to implement checkbox selection or cancellation

Implementation ideas

Code Sample

Win10 configuration tomcat environment variables tutorial diagram

How to use ECharts in WeChat Mini Programs using uniapp

Alignment issue between input text box and img verification code (img is always one head higher than input)

Simple steps to encapsulate components in Vue projects

How to use MyCat to implement MySQL master-slave read-write separation in Linux

Use image to submit the form instead of using button to submit the form

W3C Tutorial (8): W3C XML Schema Activities

How familiar are you with pure HTML tags?

Quickly solve the problem of slow startup after Tomcat reconfiguration

Summary of common sql statements in Mysql

Recommend

Summary of problems that may occur when using JDBC to connect to Mysql database

Troubleshooting ideas and solutions for high CPU usage in Linux systems

How to install common components (mysql, redis) in Docker

Testing of hyperlink opening target

Implementation of pushing Docker images to Docker Hub

Solution to many line breaks and carriage returns in MySQL data

Detailed introduction to CSS font, text, and list properties

Implementation of React star rating component

How to use jconsole to monitor remote Tomcat services

Trash-Cli: Command-line Recycle Bin Tool on Linux

How to use IDEA to create a web project and publish it to tomcat

Detailed tutorial on installing qt5.12.8 and environment configuration on ubuntu18.04

What is Makefile in Linux? How does it work?

When adding a Windows 2008 server subdomain to a parent domain, an error message appears: the domain already exists

Javascript Virtual DOM Detailed Explanation