Home > Developer > Web Develop
The following features are Implemented:
1: Select the first check box, then all of the following check boxes are selected, remove the check box selected, the following are not selected
2: when clicking the Select All button, above Football. basketball, swimming, singing all selected
3: when clicking the Select All button, above four all cancel
4: when clicking the deselect button, the selected change is not selected, the selected option is not selected
1 <Scripttype= "text/javascript"src= "jquery-1.8.2.min.js"></Script> //this is a file, every time to see this code has not written 2 </Head>3 <Body>4 <formMethod= "post"Action="" >5 Please choose your hobby! 6 <BR/>7 <inputtype= "checkbox"ID= "checkall_2"/>Select All/select All<BR/>8 <inputtype= "checkbox"name= "items"value= "football"/>Football9 <inputtype= "checkbox"name= "items"value= "basketball"/>BasketballTen <inputtype= "checkbox"name= "items"value= "swimming"/>Swimming one <inputtype= "checkbox"name= "items"value= "singing"/>singing a <BR/> - <inputtype= "button"ID= "checkall"value= "select all"/> - <inputtype= "button"ID= "checkno"value= "all is not selected"/> the <inputtype= "button"ID= "checkrev"value= "reverse selection"/> - <inputtype= "button"ID= "send"value= "submit"/> - </form> - + <Scripttype= "text/javascript"> - //Select All + $("#checkAll"). Click (function(){ a $("input[name=items]"). attr ("checked","checked"); //$ is selected on the input tab, the Name property is the items tab, and attr represents the Add property at }); - - //all do not choose - $("#checkNo"). Click (function(){ - $("input[type=checkbox]"). attr ("checked",NULL); //$ is selected in the input premise type is a checkbox, and the checked is null to not select - }); in //Inverse Selection - $("#checkRev"). Click (function(){ to $("input[type=checkbox][name=items]"). each (function() { ///you can also put multiple attributes, each of which represents an iteration, iterating over all the elements you have selected, because there are four of them that meet the criteria + - if( this . Checked) { //.checked can be used to determine if the check box is selected the $( this). attr ("checked",NULL); * }Else{ $ $( this). attr ("checked","checked");Panax Notoginseng } - }); the }); + //Select all/ select All a $("#checkAll_2"). Click (function(){ the if( this. Checked) { //here represents if selected, then all of the following are selected + $("input[type=checkbox][name=items]"). attr ("checked","checked"); - }Else{ $ $("input[type=checkbox][name=items]"). attr ("checked",NULL); $ } - }); - </Script> the </Body>
thinking: this.checked in line 33 does not add $ (), and 34 lines This why add $ sign?
Understand: If it is this it means that it is a DOM object, and when you add $ (this) that means that this is a juery object.
While. checked is a method of Dom Objects,. attr is a method of the Juery Object. All you need to do with the DOM object method in the future is to use this, and use the Juery object as a method of $ (this)
Working with a check box with jquery
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
