Home > Developer > Web Develop
Native JS implementation of the check box for the full selection and all the effects:
The use of jquery to implement the check box selection and full selection is very simple, here is not introduced, specifically, you can see the jquery implementation of the CheckBox check box and the full selection of the effect of the section, the following describes how to use native JavaScript to achieve this effect , the code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Body{font-size:12px;}ul{List-style:None}</style><Scripttype= "Text/javascript">window.onload=function(){ varBox=document.getElementById ("Box"); varFlag=document.getElementById ("Flag"); varCheckall=document.getElementById ("Checkall"); Checks=Box.getelementsbytagname ("input"); Checkall.onclick=function() { if( This. Checked) { for(varI=0; I<Checks.length;i++) {checks[i].checked=true; } flag.innerhtml="Cancel"; } Else { for(varI=0; I<Checks.length;i++) {checks[i].checked=false; } flag.innerhtml="Select All"; } }}</Script> </Head> <Body><ulID= "box"> <Li><inputtype= "checkbox">Ant Tribe One</Li> <Li><inputtype= "checkbox">Ant Tribe II</Li> <Li><inputtype= "checkbox">Ant Tribe Three</Li> <Li><inputtype= "checkbox">Ant Tribe Four</Li></ul><inputtype= "checkbox"ID= "Checkall"><spanID= "Flag">Select All</span> </Body> </HTML>
The above code to achieve a full selection and no effect, the code is very simple, below to do a brief introduction.
I. Principle of implementation:
When you click the bottom check box, the code first determines whether this check box is selected, if it is selected, to select All, and then use the For loop to traverse the entire check box, set the check box to the selected state, and the text in span is set to cancel, deselect all the same reason, there is not much to introduce.
Two. Related reading:
The 1.getElementsByTagName () function can be found in the document.getElementsByTagName () section of JavaScript .
2.onclick events can be found in the OnClick events section of JavaScript .
3.checked properties can be found in the Checkbox.checked Properties section of JavaScript .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11489
For more information, refer to: http://www.softwhy.com/javascript/
Native JS implementation of the check box of the full selection and all the effect of the selection
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
