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

Vue realizes adding watermark to uploaded pictures (upgraded version)

The vue project implements an upgraded version of...

MySQL 8.0 user and role management principles and usage details

This article describes MySQL 8.0 user and role ma...

Pure CSS to solve the ceiling and bottom suction in H5 layout implementation steps

What products do you want to mention? Recently, t...

JavaScript to implement mobile signature function

This article shares the specific code of JavaScri...

The difference and usage of single-line and double-line layout in Flex mobile layout

Here is a single-line layout using ul>li for l...

The easiest way to make a program run automatically at startup in Linux

I collected a lot of them, but all ended in failu...

VMware ESXI server virtualization cluster

Table of contents summary Environment and tool pr...

Examples of using HTML list tags dl, ul, ol

Copy code The code is as follows: <!-- List ta...

WeChat applet Amap multi-point route planning process example detailed explanation

Call How to call Amap API? The official open docu...

Several scenarios for using the Nginx Rewrite module

Application scenario 1: Domain name-based redirec...

Solution to the 404/503 problem when logging in to TeamCenter12

TeamCenter12 enters the account password and clic...

HTML code that can make IE freeze

We simply need to open any text editor, copy the f...

Summary of MySQL view principles and usage examples

This article summarizes the principles and usage ...

Graphical explanation of the underlying principle of JavaScript scope chain

Table of contents Preface Scope 1. What is scope?...

Implementation of MySQL Multi-version Concurrency Control MVCC

Table of contents What is MVCC MVCC Implementatio...