Knowledge accumulation of check box selection and inverse selection problems
1. JS fragments used in the project
<script type= "Text/javascript" >JQuery (function() {//When you click on the Select AllJQuery ("thead tr th:first Input"). Click (function () { //The check boxes that will require a select all are the same as the selected check box for the Select allJQuery ("tbody tr td input"). attr ("Checked", This. Checked); }); //check box outside the Select allJQuery ("tbody tr td Input"). Click (function() {//If the current check box is False, the Select all check box will not be selected if(! This. Checked) {//Set the Select all check box to uncheckedJQuery ("thead tr th:first input"). attr ("Checked", This. Checked); } Else{//determines whether the other check boxes are all selected if all selected, the Select all check box is set to the selected state true otherwise set to False if(jquery ("Tbody tr TD input:checked"). Length = = JQuery ("tbody tr td Input"). Length) {jQuery ("Thead tr Th:first input"). attr ("Checked", This. Checked); } } }) })</script>
Final effect
2. Simple example code
//html Fragment<DivID= "Allcheckbox"> <inputtype= "checkbox"class= "Checkall"style= "width:20px; height:20px" /></Div><DivID= "Childrencheckbox"> <inputtype= "checkbox"class= "Checkall"style= "width:20px; height:20px" /> <inputtype= "checkbox"class= "Checkall"style= "width:20px; height:20px" /> <inputtype= "checkbox"class= "Checkall"style= "width:20px; height:20px" /> <inputtype= "checkbox"class= "Checkall"style= "width:20px; height:20px" /></Div>
//JS Code Snippet//NOTE: To introduce the JS amount of jquery before this practice<Scripttype= "Text/javascript">JQuery (function() {JQuery ("#allcheckbox Input"). Click (function() {JQuery ("#childrencheckbox Input"). attr ("checked", This. Checked); }); JQuery ("#childrencheckbox Input"). Click (function () { if (! This. Checked) {JQuery ("#allcheckbox Input"). attr ("checked", This. Checked); } Else { if(JQuery ("#childrencheckbox input:checked"). Length==JQuery ("#childrencheckbox Input"). Length) {jQuery ("#allcheckbox Input"). attr ("checked", This. Checked); } } }) })</Script>
3, each use to get the selected item and loop to get his ID
// ID is saved in the PID property of the check box var intid = ""; JQuery ("tbody tr TD Input:checked"). each (function (index, Element) { = IntID + jQuery (this). attr ("pid") + ",";}) if (IntID = = "") { alert ("No data item selected") ; return ;}
// Cyclic data var = ["One", "arr1", "three", "four", "five"function() {alert ( This );});
jquery Select All and not select all jquery each