JavaScript to implement checkbox selection or cancellation

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

Recommend

How to use css overflow: hidden (overflow hiding and clearing floats)

Overflow Hide It means hiding text or image infor...

Implementation of MySQL Multi-version Concurrency Control MVCC

Table of contents What is MVCC MVCC Implementatio...

MySQL permission control details analysis

Table of contents 1. Global level 2. Database lev...

How to run a project with docker

1. Enter the directory where your project war is ...

How to let DOSBox automatically execute commands after startup

Using DOSBox, you can simulate DOS under Windows ...

Solutions to MySql crash and service failure to start

I have been in contact with PHP for so long, but ...

Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution

A few days ago, when I was adjusting a module of a...

vitrualBox+ubuntu16.04 install python3.6 latest tutorial and detailed steps

Because I need to use Ubuntu+Python 3.6 version t...

MySQL calculates the number of days, months, and years between two dates

The MySQL built-in date function TIMESTAMPDIFF ca...

Detailed steps to install Docker mongoDB 4.2.1 and collect springboot logs

1: Install mongodb in docker Step 1: Install mong...

MySQL database design: detailed explanation of Schema operation method using Python

Before the arrow was shot, the bow whispered to t...

How to configure Nginx to split traffic based on the last segment of the request IP

It is mainly the configuration jump of the if jud...

Introduction to basic concepts and technologies used in Web development

Today, this article introduces some basic concept...

Detailed explanation of the principle and implementation process of Nginx configuration https

Use the Linux utility certbot to generate https c...

How to set up Spring Boot using Docker layered packaging

The Spring Boot project uses docker containers, j...