javascript中checkbox使用方法簡單實例演示
編輯：關於JavaScript
演示一個小小的例子：在購物車裡面，我們能夠勾選自己所選的商品，然後能夠顯示出相應的價格。
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");
}
總結：
1）.這個主要就是說，復選框的應用，選中復選框之後，如何獲取相應的內容
2）.要是屬於同一組的，在復選框的屬性內name="mm"屬性要寫一致；
var names=document.getElementsByName("mm");可以通過這個獲得，是否選中，調用value進行操作checked 設置或獲取復選框或單選鈕的狀態。 然後一一 加起來
3）.全選的設置。同樣的，通過document.getElementsByName獲得對象數組，然後一一付給true
當一個沒有選中的時候，我們就把全選按鈕設置checked=false; 采用標記來區別，要是標記沒有變化，就說明沒有一個沒選（這句話有些繞口，大家仔細琢磨琢磨）。
以上為大家詳細介紹了javascript中checkbox使用方法，歡迎大家學習。
小編推薦
熱門推薦