Home >Web Front-end >JS Tutorial >Simple example demonstration of how to use checkbox in javascript_javascript skills

Simple example demonstration of how to use checkbox in javascript_javascript skills

WBOYOriginal: 2016-05-16 15:31:441368browse

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>

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; 
    } 
   }

Additional: When calling the function in Select Alla7baf0d00ee0ffd7105ebf8b9ce77d4a, 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; 
    } 
   }

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"); 
     
   }

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：7 personalized map plug-ins based on Jquery and html5_jqueryNext article：7 personalized map plug-ins based on Jquery and html5_jquery

See more

Simple example demonstration of how to use checkbox in javascript_javascript skills

Related articles