當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 復選框組選JS代碼怎么寫

復選框組選JS代碼怎么寫

2012/11/1 11:18:05作者：佚名來源：網絡

移動端

【實例名稱】

復選框組選JS代碼怎么寫

【實例描述】

復選框的功能是用來多選，當復選框有多組數據時，如何實現同時選中某一組數據呢?本例學習這種效果的制作過程和原理。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（www.yzddtk.cn）</title>
<script language=javascript>
function sts()
{
}
</script>
</head>
<body>
<script language="JavaScript">
function selectGroup(obj)
{
  var chkObj = obj.id;              
//獲取對象的id
  var chkValue=obj.checked;                
//判斷當前對象是否選中
  var chkArr = mySpan.getElementsByTagName("input");
//獲取所有的復選框
  for(var i=0; i<chkArr.length; i++)         
//遍歷所有的復選框
    if(chkArr[i].id==chkObj)                   
//判斷ID是否相等
      chkArr[i].checked=chkValue                      
//如果相等則選中
}
</script>
<span id="mySpan">
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="A001" value="1">A001
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="B001" value="3">>B001
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="A001" value="444">>A001<br />
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="B001" value="23">>B001
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="B001" value="11">>B001
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="C001" value="15">>C001<br />
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="C001" value="17">>C001
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="C001" value="10">>C001
<input type="checkbox" onclick="selectGroup(this)" 
name="ID[]" id="C001" value="121">>C001
</span>
</body>
</html>

【運行效果】

運行效果

【難點剖析】

本例為同組的復選框設置了相同的id，這在ASP．NET中一般是不允許的。當用戶選中某個復選框時，通過“obj．id’’獲取其id，然后遍歷頁面中的所有復選框，并指定相同id的復選框狀態相同。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性，你可以點擊：復選框組選進行本實例源碼下載

標簽：復選框

上一篇：PS圖片處理：制作簡單的彩色漸變心形
下一篇：怎么看電腦顯卡

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频