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

Computed properties and listeners details

JavaScript to implement checkbox selection or cancellation

Implementation ideas

Code Sample

Computed properties and listeners details

docker run -v mounts data volumes abnormally, and the container status is always restarting

Solution to Docker image downloading too slowly

Share 8 MySQL pitfalls that you have to mention

How to simply encapsulate axios in vue

Pros and Cons of Vite and Vue CLI

The process of quickly converting mysql left join to inner join

Detailed tutorial on building nextcloud private cloud storage network disk

Markup language - CSS layout

Ubuntu 18.04 disable/enable touchpad via command

Recommend

The iframe frame sets the white background to transparent in IE browser

CSS polar coordinates example code

Detailed installation tutorial of Mysql5.7.19 under Centos7

Detailed explanation of map overlay in openlayers6

A brief analysis of Linux to check the firewall status and the status of the ports open to the outside world

5 basic skills of topic page design (Alibaba UED Shanmu)

Detailed tutorial on installing mysql 5.7.26 on centOS7.4

How to handle long data when displaying it in html

Should nullable fields in MySQL be set to NULL or NOT NULL?

Docker enables multiple port mapping commands

MySQL import and export backup details

Analysis of the project process in idea packaging and uploading to cloud service

Use Docker to build a Git image using the clone repository

Example of using Docker Swarm to build a distributed crawler cluster

Implementation of Nginx configuration of multi-port and multi-domain name access