示範一個小小的例子：在購物車裡面，我們能夠勾選自己所選的商品，然後能夠顯示出相應的價格。
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使用方法，歡迎大家學習。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
