Java CheckBox Usage Method Simple example Demo _javascript skill

Source: Internet
Author: User

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.

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.