jQuery-select all/select all/reverse select

<!DOCTYPE html>
<html>
<head>
<title>jQuery-select all/select all/invert</title>
<script type="text/javascript" src="../../script/jquery-1.7 .2.js"></script>
<script type="text/javascript">
//After the page is loaded, execute
$(function(){ // Get all checkbox objects (the following are checkbox objects method) [name=items] is an attribute filter // const items = $(":checkbox[name=items]"); // const items = $("[name='items']"); const items = $(":checkbox");

//Select all buttons
$("#checkedAllBtn").click(function(){ //The status of all check boxes becomes selected items.attr("checked",true); //Select all/select all The state of the checkbox also becomes selected $("#checkedAllBox").attr("checked",true); });

//All unchecked buttons
$("#checkedNoBtn").click(function(){ //The state of all checkboxes becomes unchecked items.attr("checked",false); //Select all/ The status of all checked boxes also becomes unchecked $("#checkedAllBox").attr("checked",false); });

       //Invert the button
       $("#checkedRevBtn").click(function(){            //Use the loop function each() to traverse the items array, and execute the function body during the traversal process            items.each(function(){                //Repeat The state of the check box is assigned the opposite value                this.checked = !this.checked;            });            //Judge the number of checked states of the check box, if the number of checked states is equal to 4 ":checked" means the checked state            if ($("[ name='items']:checked").length == 4) {                $("#checkedAllBox").attr("checked",true); }            else {                $("#checkedAllBox").attr("checked" ,false);            }        }); //Submit button        $("#sendBtn"). click(function(){            //traverse the selected checkboxes




           $(":checkbox:checked").each(function(){                //The value attribute value of the pop-up check box                alert(this.value);            });        }); //Select all/uncheck all check boxes        $("#checkedAllBox").click(function(){            items.attr("checked",this.checked);        });        //Select all/unselect all checkboxes and items state synchronization        //checkboxes Bind the mouse click event        $("[name='items']").click(function(){            //Judge the state of the check box being selected, equal to 4 means all selected, the result is true, not equal to 4 means no All selected, the result is false            //This method is obviously simpler than the above if...else... statement            const flag = $("[name='items']:checked").length == 4;            $( "#checkedAllBox").attr("checked",flag);        });    });






</script>
</head>
<body>
   <form method="post" action="http://localhost:8080">        <input type="button" id="checkedNoBtn " value="Do not select all" />        <input type="button" id="checkedAllBtn" value="select all" />        <br />        <input type="checkbox" name="items" value="table tennis" />table tennis        <input type="checkbox" name="items" value="Badminton" />Badminton        <input type="checkbox" name="items" value="Basketball" />Basketball        <input type="checkbox" name="items" value="Football" />Football        <br />
       What is your favorite sport? <input type="checkbox" id="checkedAllBox" />Select all/Not all

       <input type="button" id="sendBtn" value="提　交" />
   </form>
</body>
</html>

jQuery-select all/select all/reverse select

Guess you like