快捷導(dǎo)航

javascript中checkbox使用方法簡(jiǎn)單實(shí)例演示

更新時(shí)間：2015年11月17日 17:17:11 作者：YX_blog

這篇文章通過(guò)簡(jiǎn)單的實(shí)例演示了javascript中checkbox使用方法，感興趣的小伙伴們可以參考一下

演示一個(gè)小小的例子：在購(gòu)物車?yán)锩?，我們能夠勾選自己所選的商品，然后能夠顯示出相應(yīng)的價(jià)格。
1、首先顯示出相應(yīng)的界面：

相關(guān)代碼：

<body> 
  商品列表：<br/> 
  筆記本電腦<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 
  臺(tái)式機(jī)<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 
  洗衣機(jī)<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中，要是屬于同一組的，在復(fù)選框的屬性內(nèi)name="mm"屬性要寫(xiě)一樣；到時(shí)候方便遍歷所選項(xiàng)；在radio中，name="mm"也要設(shè)置一樣，便于屬于同一組相互區(qū)分。
2、全選按鈕的設(shè)置

相關(guān)代碼：

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

附加：當(dāng)調(diào)用全選<input type="checkbox" name="all" onclick="allCheck(this)" />里面的函數(shù)之后就會(huì)遍歷所有name相同的對(duì)象，設(shè)置所有的復(fù)選框的狀態(tài)為checked=true選中。
3、當(dāng)所有的狀態(tài)都選中全選自動(dòng)選上
代碼實(shí)現(xiàn)：

function chose(node){ 
    var flag=true;//用于遍歷是否是全部變量設(shè)置 
    var allM=document.getElementsByName("all")[0]; 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     if(node[x].checked==false){//只要有一個(gè)沒(méi)選中，就退出遍歷，標(biāo)記設(shè)置為false 
      flag=false; 
      break; 
     } 
    } 
    if(flag){ 
     allM.checked=true; 
    }else{ 
     allM.checked=false; 
    } 
   }

4、點(diǎn)擊查看按鈕之后調(diào)用函數(shù)

function sumall(){ 
    var sum=0; 
    var names=document.getElementsByName("mm"); 
    for(var x=0;x<names.length;x++){ 
     if(names[x].checked){//選中的全部加起來(lái) 
      sum=sum+parseInt(names[x].value);//將選中的值解析出來(lái) 
     } 
    } 
    document.getElementById("spanid").innerHTML=("總和為 "+sum+" 元").fontcolor("red"); 
     
   }

總結(jié)：
1）.這個(gè)主要就是說(shuō)，復(fù)選框的應(yīng)用，選中復(fù)選框之后，如何獲取相應(yīng)的內(nèi)容

2）.要是屬于同一組的，在復(fù)選框的屬性內(nèi)name="mm"屬性要寫(xiě)一致；

var names=document.getElementsByName("mm");可以通過(guò)這個(gè)獲得，是否選中，調(diào)用value進(jìn)行操作checked 設(shè)置或獲取復(fù)選框或單選鈕的狀態(tài)。然后一一加起來(lái)

3）.全選的設(shè)置。同樣的，通過(guò)document.getElementsByName獲得對(duì)象數(shù)組，然后一一付給true

當(dāng)一個(gè)沒(méi)有選中的時(shí)候，我們就把全選按鈕設(shè)置checked=false; 采用標(biāo)記來(lái)區(qū)別，要是標(biāo)記沒(méi)有變化，就說(shuō)明沒(méi)有一個(gè)沒(méi)選（這句話有些繞口，大家仔細(xì)琢磨琢磨）。

以上為大家詳細(xì)介紹了javascript中checkbox使用方法，歡迎大家學(xué)習(xí)。

您可能感興趣的文章: