Simple example demonstration of how to use checkbox in javascript

Simple example demonstration of how to use checkbox in javascript_javascript skills

WBOY

Release： 2016-05-16 15:31:44

Original

1356 people have browsed it

Demonstrate a small example: in the shopping cart, we can check the products we choose, and then the corresponding prices can be displayed.
1. First display the corresponding interface:

Related codes:

<body> 
  商品列表：<br/> 
  笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 
  台式机<input type="checkbox" onclick="chose(this)" name="mm" value="2900"/> 2900 
  路由器<input type="checkbox" onclick="chose(this)" name="mm" value="90"/> 90 
  <br/> 
  家常用品<input type="checkbox" onclick="chose(this)" name="mm" value="500"/>500 
  洗衣机<input type="checkbox" onclick="chose(this)" name="mm" value="5600"/> 5600 
  <br/>全选<input type="checkbox" name="all" onclick="allCheck(this)" /> 
  <br/><input type="button" value="查看金额" name="btn" onclick="sumall()"/> <span id="spanid"></span> 
   
 </body>

Copy after login

Note: In the checkbox, if they belong to the same group, the name="mm" attribute must be written the same in the attributes of the checkbox; it will be convenient to traverse the selected items; in the radio, name="mm" must also be written The settings are the same so that they can be distinguished from each other if they belong to the same group.
2. Select all button settings

Related codes:

function allCheck(node1){ 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     node[x].checked=node1.checked; 
    } 
   }

Copy after login

Additional: When calling the function in Select All, it will traverse all the functions with the same name Object, set the status of all check boxes to checked=true.
3. When all states are selected, select all and select automatically
Code implementation:

function chose(node){ 
    var flag=true;//用于遍历是否是全部变量设置 
    var allM=document.getElementsByName("all")[0]; 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     if(node[x].checked==false){//只要有一个没选中，就退出遍历，标记设置为false 
      flag=false; 
      break; 
     } 
    } 
    if(flag){ 
     allM.checked=true; 
    }else{ 
     allM.checked=false; 
    } 
   }

Copy after login

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){//选中的全部加起来 
      sum=sum+parseInt(names[x].value);//将选中的值解析出来 
     } 
    } 
    document.getElementById("spanid").innerHTML=("总和为 "+sum+" 元").fontcolor("red"); 
     
   }

Copy after login

Summary:
1). This mainly refers to the application of check boxes. After selecting the check box, how to obtain the corresponding content

2). If they belong to the same group, the name="mm" attribute must be written consistently in the attributes of the check box;

var names=document.getElementsByName("mm"); You can use this to get whether it is checked or not. Call value to operate checked to set or get the status of the check box or radio button. Then add them up one by one

3).Select all settings. Similarly, obtain the object array through document.getElementsByName, and then pay true

one by one

When one is not selected, we set the select all button to checked=false; and use markers to distinguish it. If the markers do not change, it means that none of them are unselected (this sentence is a bit convoluted, please think about it carefully) .

The above introduces in detail how to use checkbox in javascript. Everyone is welcome to learn.