jQuery implements all selection and reverse selection operation case

This article shares the specific code of jQuery to implement the full selection and reverse selection operation for your reference. The specific content is as follows

Select all + deselect

You can view the results based on the console

<!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>Filter Selector</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>

<body>

    <table border="1">
        <tr>
            <td><input type="checkbox" value="1"></td>
            <td>Juggernaut</td>
            <td>450</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="2"></td>
            <td>Swordsman</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="3"></td>
            <td>Sword Princess</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="4"></td>
            <td>Sword Demon</td>
            <td>6300</td>
        </tr>
    </table>
 
    <input type="button" value="Click to select the first one" id="firstBtn">
    <input type="button" value="Click to select the last one" id="lastBtn">
    <input type="button" value="Select all for batch deletion" id="allBtn">
    <input type="button" value="View selected" id="checkBtn">
    <input type="button" value="View unchecked" id="nocheckBtn">
    <input type="button" value="Invert" id="overBtn">
    <input type="button" value="Upgraded version of reverse selection" id="overBtn1">

<script>

        $(function() {
            //jQuery uses the filter selector to achieve odd and even color change $("table tr:even").css('background-color','pink');
            $("table tr:odd").css('background-color','blue');
            // 
            
            // Take the first $("#firstBtn").click(function() {
                var first = $("table tr:first").html();
                console.log(first);  
            })

             // Get the last $("#lastBtn").click(function() {
                var last = $("table tr:last").text();
                console.log(last);  
            })
            // Select all---- used to delete in batches$("#allBtn").click(function() { 
                // Idea: Find all checkbox td and traverse and select them $.each($("table tr td>input"), function(index, value) {
                  // console.log(index);   
                  // console.log(value);
                    console.log($(this).val()); // Traverse the value $(this).prop('checked',true); // Select all})

            }) 
            // Click to view the selected $("#checkBtn").click(function() { 
                // Use the filter selector to select:
                $("table tr td>input:checked")
                $.each($("table tr td>input:checked"), function(index, value) {
                    
                    console.log($(this).val()); // Traverse the value})
            
            }) 
            // Click to view unchecked $("#nocheckBtn").click(function() { 
                console.log($("table tr td>input:not(:checked)"))
            })
            // Invert selection$("#overBtn").click(function() { 
                $.each($("table tr td>input"), function(index, value) {
                    var istrue =$(this).prop("checked");
                    //console.log(value.checked = !value.checked); // Traverse the value if(istrue){
                        $(this).prop("checked",false);
                   } else{
                    $(this).prop("checked",true);
                   }
                })   
            })     
            // Upgraded version of full/inverse selection $("#overBtn1").click(function() { 
                $.each($("table tr td>input"), function(index, value){
                $(this).prop("checked",!$(this).prop("checked"))
                })
            })
    })  
</script>

</body>
</html>

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:

jQuery implements selection of all, inversion of all, and obtaining all selected checkboxes
JQUERY checkbox CHECKBOX select all, deselect all
Summary of jQuery CheckBox Select All, Unselect All Implementation Code
Two simple methods to select and cancel all with JQuery
jQuery determines whether the checkbox is selected and selects all and deselects the implementation code
jQuery operates checkbox to select and deselect all
jquery checkbox CHECKBOX select all, deselect
JQUERY CHECKBOX select all, unselect all, reverse selection method three
jQuery one-click control checkbox select all, deselect or unselect all
Implementing CheckBox Select All and Deselect All Based on JQuery

<<: mysql-5.7.28 installation tutorial in Linux

>>: mysql create database, add users, user authorization practical method