javascript中checkbox使用方法簡單實例示範_javascript技巧
- WBOY原創
- 2016-05-16 15:31:441341瀏覽
示範一個小小的例子：在購物車裡面，我們能夠勾選自己所選的商品，然後能夠顯示出對應的價格。
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;
}
}
附加：當呼叫全選裡面的函數之後就會遍歷所有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使用方法，歡迎大家學習。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn