javascript中checkbox使用方法簡單實例演示

更新時間：2015年11月17日 17:17:11 作者：YX_blog

這篇文章通過簡單的實例演示了javascript中checkbox使用方法，感興趣的小伙伴們可以參考一下

演示一個小小的例子：在購物車里面，我們能夠勾選自己所選的商品，然后能夠顯示出相應的價格。
1、首先顯示出相應的界面：

相關(guān)代碼：

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

注意：在checkbox中，要是屬于同一組的，在復選框的屬性內(nèi)name="mm"屬性要寫一樣；到時候方便遍歷所選項；在radio中，name="mm"也要設(shè)置一樣，便于屬于同一組相互區(qū)分。
2、全選按鈕的設(shè)置

相關(guān)代碼：

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

附加：當調(diào)用全選<input type="checkbox" name="all" onclick="allCheck(this)" />里面的函數(shù)之后就會遍歷所有name相同的對象，設(shè)置所有的復選框的狀態(tài)為checked=true選中。
3、當所有的狀態(tài)都選中全選自動選上
代碼實現(xiàn)：

function chose(node){ 
    var flag=true;//用于遍歷是否是全部變量設(shè)置 
    var allM=document.getElementsByName("all")[0]; 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     if(node[x].checked==false){//只要有一個沒選中，就退出遍歷，標記設(shè)置為false 
      flag=false; 
      break; 
     } 
    } 
    if(flag){ 
     allM.checked=true; 
    }else{ 
     allM.checked=false; 
    } 
   }

4、點擊查看按鈕之后調(diào)用函數(shù)

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