html中的簡單例項演示（checkbox）的使用
阿新 • • 發佈：2018-12-23
演示一個小小的例子：在購物車裡面，我們能夠勾選自己所選的商品，然後能夠顯示出相應的價格。
1，首先顯示出相應的介面：
相關程式碼：
注意：在checkbox中，要是屬於同一組的，在複選框的屬性內name="mm"屬性要寫一樣；到時候方便遍歷所選項；在radio中，name="mm"也要設定一樣，便於屬於同一組相互區分。<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>
2，全選按鈕的設定
相關程式碼：
function allCheck(node1){
var node=document.getElementsByName("mm");
for (var x = 0; x < node.length; x++) {
node[x].checked=node1.checked;
}
}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");
}
總結：
1，這個主要就是說，複選框的應用，選中複選框之後，如何獲取相應的內容2，要是屬於同一組的，在複選框的屬性內name="mm"屬性要寫一致；
var names=document.getElementsByName("mm");可以通過這個獲得，是否選中，呼叫value進行操作checked 設定或獲取複選框或單選鈕的狀態。 然後一一 加起來
3，全選的設定。同樣的，通過document.getElementsByName獲得物件陣列，然後一一付給true
當一個沒有選中的時候，我們就把全選按鈕設定checked=false; 採用標記來區別，要是標記沒有變化，就說明沒有一個沒選，否則要把全選的按鈕設定成選中狀態。