當前位置:軟件學堂 > 資訊首頁 > 網(wǎng)絡編程 > 編程其他 > JS代碼實現(xiàn)復選框全選(2)

JS代碼實現(xiàn)復選框全選(2)

2012/11/1 20:08:30作者:佚名來源:網(wǎng)絡

移動端

【實例名稱】

JS代碼實現(xiàn)復選框全選(2)

【實例描述】

復選框的全選功能通過服務器端開發(fā)語言可以很方便地實現(xiàn),但有時為了提高頁面的訪問速度,需要使用JavaScript完成。本例學習實現(xiàn)全選的JavaScript方法。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>標題頁-學無憂(m.wangbatian.cn)</title> <SCRIPT LANGUAGE="JavaScript"> function checkAll(str) {   var a = document.getElementsByName(str);       //獲取所有復選框   var n = a.length;                              //獲取復選框的個數(shù)   for (var i=0; i<n; i++)   a[i].checked = window.event.srcElement.checked; //通過單擊的按鈕判斷是選中還是未選 } </script> </head> <body> <input type=checkbox name=All onclick="checkAll('ck')">全選<br/> <input type=checkbox name=ck  >體育<br/> <input type=checkbox name=ck  >旅游<br/> <input type=checkbox name=ck  >飲食<br/> <input type=checkbox name=ck  >影視<br/> <input type=checkbox name=ck  >音樂<br/><br/></body> </html>

【運行效果】

復選框全選運行效果

【難點剖析】

本例的重點是如何獲取頁面中所有的復選框控件。使用“document.getElementsByName”可以獲取頁面中所有的復選框控件,然后使用“window.event.srcElement.checked”判斷是選中還是未選。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性,你可以點擊:復選框全選(2) 進行本實例源碼下載 

標簽: JS代碼  復選框  全選