jquery Select All and not select all jquery each

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.