JavaScript to achieve all or reverse selection function

This article shares the specific code of JavaScript to achieve the function of selecting all or inverting selection for your reference. The specific content is as follows

The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Case--Select All Tables</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        .out {
            background-color: white;
        }

        .over {
            background-color: pink;
        }
        div{
            margin-top: 10px;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            //Select all document.getElementById("checkAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = true;
                }
            }
            //Uncheck all document.getElementById("unCheckAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
            }
            //Recheck document.getElementById("reCheck").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            //When the mouse passes over, the color changes var trs = document.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }

            //Select the top checkbox and select all document.getElementById("firstCb").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = this.checked;
                }
            }

        }

    </script>
</head>
<body>
<table>
    <caption>Student Information Form</caption>
    <tr>
        <td><input type="checkbox" name="cb" id="firstCb"></td>
        <td>Number</td>
        <td>Name</td>
        <td>Gender</td>
        <td>Operation</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>Linghu Chong</td>
        <td>Male</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">Delete</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>Let me go</td>
        <td>Male</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">Delete</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>Yue Buqun</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">Delete</a></td>
    </tr>
</table>
<div>
    <input type="button" value="Select All" id="checkAll">
    <input type="button" value="Uncheck All" id="unCheckAll">
    <input type="button" value="Recheck" id="reCheck">
</div>


</body>
</html>

Operation Results

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 to achieve checkbox all selection and inverse selection example
js implements the method of selecting all, unselecting and inverting checkboxes
AngularJS implements the function of selecting all and deselecting
javascript checkbox select all/deselect all and delete in batches
Using Vue.js to achieve the effect of all selection and reverse selection of checkbox
Compatible with IE and Firefox versions of js to reverse the selection of all checkboxes
JavaScript implements simple select all and inverse select functions
js html css to achieve checkbox all selection and inverse selection
Detailed explanation of javascript to implement checkbox select all and reverse select events
js operates CheckBoxList to select all/deselect all (completed on the client side)

<<: MySQL practical skills: analysis of methods to compare whether two tables have different data

>>: Remote development with VSCode and SSH