Demo A small example: in the shopping cart, we can check our choice of goods, and then can show the corresponding price.
1, first show the corresponding interface:
Related code:
<body> Product List:<br/> laptop <input type= "checkbox" name= "MM" value= "3000" onclick= "chose" (this) >3000 Desktop <input type= "checkbox" onclick= "chose (this)" Name= "MM" value= "2900"/> 2900 Router <input type= "checkbox" onclick= "chose (this)" Name= "MM" value= ""/> <br/> homely goods <input type= " CheckBox "onclick=" chose (this) "Name=" MM "value="/>500 washing machine <input type= "checkbox" onclick= "chose" (This ) "Name=" MM "value=" 5600 "/> 5600 <br/> select <input type=" checkbox "Name=" All "onclick=" Allcheck (This) " > <br/><input type= "button" value= "View Amount" name= "btn" onclick= "SumAll ()"/> <span id= "Spanid" ></span> </body>
Note: In the checkbox, if belong to the same group, in the check box Properties name= the "MM" property to write the same, the time is convenient to traverse the selection, in radio, name= "MM" also want to set the same, easy to belong to the same group to distinguish each other.
2, all Select the button's setting
Related code:
function Allcheck (node1) {
var node=document.getelementsbyname ("MM");
for (var x = 0; x < Node.length + +) {
node[x].checked=node1.checked
}
}
Attach: all objects with the same name are traversed after the function that calls the full <input type= checkbox name= "All" onclick= "Allcheck"/>. Sets the status of all check boxes to Checked=true selected.
3, when all the states are selected Select all automatic selection
Code implementation:
Function chose (node) {
var flag=true;//is used to traverse whether the
var allm=document.getelementsbyname ("All") is set for all variables [0];
var node=document.getelementsbyname ("MM");
for (var x = 0; x < node.length/x + +) {
if (node[x].checked==false) {//If one is not selected, exit traversal and the tag is set to False
flag=false;< C7/>break
}
}
if (flag) {
allm.checked=true;
} else{
allm.checked=false
}
}
4. Call the function after clicking the View button
function SumAll () {
var sum=0;
var names=document.getelementsbyname ("MM");
for (Var x=0;x<names.length;x++) {
if (names[x].checked) {//Selected all add up
sum=sum+parseint (names[x].value) //To resolve the selected value
}
document.getElementById ("Spanid"). Innerhtml= ("Sum as" +sum+ "meta"). FontColor ("Red");
Summarize:
1. This is basically said, check box application, select the check box, how to get the appropriate content
2. If belong to the same group, name= the "mm" attribute in the check box property to write consistent;
var names=document.getelementsbyname ("MM"); can be obtained through this, whether it is selected, call value for operation checked set or get the state of a check box or radio button. and add it all together.
3). Select all settings. Again, get an array of objects by Document.getelementsbyname and pay the true
When one is not selected, we set the full selection button checked=false; Using the mark to distinguish, if the mark does not change, it means that no one did not choose (this sentence some around the mouth, we carefully pondering).
Above for you to introduce the JavaScript in detail in the Use of CheckBox, Welcome to learn.
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
