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

2019-11-20 11:14:47

字體：大中小

來源：轉載

供稿：網友

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

相關代碼：

<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中，要是屬于同一組的，在復選框的屬性內name="mm"屬性要寫一樣；到時候方便遍歷所選項；在radio中，name="mm"也要設置一樣，便于屬于同一組相互區分。
2、全選按鈕的設置

相關代碼：

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

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

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、點擊查看按鈕之后調用函數

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