當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 復(fù)選框分組全選JS代碼怎么寫

復(fù)選框分組全選JS代碼怎么寫

2012/11/1 11:19:03作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

復(fù)選框分組全選JS代碼怎么寫

【實(shí)例描述】

可以通過遍歷窗體中的復(fù)選框?qū)崿F(xiàn)復(fù)選框的全選。如果窗體中的復(fù)選框進(jìn)行了分組，那該如何實(shí)現(xiàn)一組復(fù)選框的全選呢?

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（www.wangbatian.cn）</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="120" border="0">
    <tr>
      <td>教師組/學(xué)生組</td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="check" value="yes" />
      <input name="nocheck" type="checkbox" 
id="nocheck" value="no" /></td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="Checkbox1" value="yes" />
        <input name="nocheck" type="checkbox" 
id="Checkbox2" value="no" /></td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="Checkbox3" value="yes" />
        <input name="nocheck" type="checkbox" 
id="Checkbox4" value="no" /></td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="Checkbox5" value="yes" />
        <input name="nocheck" type="checkbox" 
id="Checkbox6" value="no" /></td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="Checkbox7" value="yes" />
        <input name="nocheck" type="checkbox" 
id="Checkbox8" value="no" /></td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="Checkbox9" value="yes" />
        <input name="nocheck" type="checkbox"
 id="Checkbox10" value="no" /></td>
    </tr>
    <tr>
      <td><input name="check" type="checkbox" 
id="Checkbox11" value="yes" />
        <input name="nocheck" type="checkbox" 
id="Checkbox12" value="no" /></td>
    </tr>
    <tr>
      <td>全選教師
      <input name="checkall" type="checkbox" 
id="checkall" value="checkbox" onclick="change(document.getElementsByName('check'), 
this.checked)" /></td>
    </tr>
    <tr>
      <td>全選學(xué)生
      <input name="nocheckall" type="checkbox" id="nocheckall" value="checkbox" 
onclick="change(document.getElementsByName('nocheck'), this.checked)" /></td>
    </tr>
  </table>
</form>
<script type="text/javascript">
var change = function (chkArray, val) 
{
 for (var i = 0 ; i < chkArray.length ; i ++) 
//遍歷指定組中的所有項(xiàng)
     chkArray[i].checked = val;              
//設(shè)置項(xiàng)為指定的值-是否選中
}
</script>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是“getElementsBvName”方法，其可以獲取指定“name”屬性的所有標(biāo)簽，這樣就可以獲取某一組復(fù)選框。然后使用“change”方法，更改復(fù)選框的選中狀態(tài)即可實(shí)現(xiàn)本例效果。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：復(fù)選框分組全選 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： 復(fù)選框  JS代碼