Home > Developer > Web Develop
Today intends to use jquery to realize the check box of the full selection, all the selection and the inverse of the problem, just started with attr ("checked", True/false) method, found that only at the beginning of the implementation of a full selection, can be achieved all not selected, unable to achieve the inverse selection, In short debugging for a long time or not get the desired effect. Finally,jquery 1.7.2 supported attr operations on intrinsic properties, and later versions only used prop . For more information about the differences between attr () and prop () in jquery, click Reference.
My code is attached below for reference:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Select all, do not select, reverse Select</title>6 <styletype= "Text/css">7 #choose Input{8 Display:Block;9 }Ten </style> One <Scriptsrc= "Http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></Script> A <Scripttype= "Text/javascript"> - $(function(){ - var$choose= $("#choose Input"); the //Select All - $("#all"). Click (function(){ - $choose. each (function(){ - $( This). Prop ("checked",true); + }); - }); + //all do not choose A $("#not"). Click (function(){ at $choose. Prop ("checked",false); - }); - //Inverse Selection - $("#reverse"). Click (function(){ - $choose. each (function(){ - $( This). Prop ("checked",!$( This). Prop ("checked")); in }); - }); to }); + </Script> - </Head> the <Body> * <DivID= "Box-function"> $ <inputID= "All"type= "button"value= "Select All" />Panax Notoginseng <inputID= "not"type= "button"value= "All is not selected" /> - <inputID= "Reverse"type= "button"value= "Reverse Selection" /> the </Div> + A <DivID= "Choose"> the <inputtype= "checkbox" /> + <inputtype= "checkbox" /> - <inputtype= "checkbox" /> $ <inputtype= "checkbox" /> $ <inputtype= "checkbox" /> - <inputtype= "checkbox" /> - <inputtype= "checkbox" /> the <inputtype= "checkbox" /> - <inputtype= "checkbox" />Wuyi <inputtype= "checkbox" /> the <inputtype= "checkbox" /> - <inputtype= "checkbox" /> Wu </Div> - </Body> About </HTML>
Complete the full text, welcome the predecessors to criticize correct!
JQuery Implementation check box Select all, all do not select, inverse selection problem resolution
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
