快捷導(dǎo)航

checkbox全選所涉及到的知識點(diǎn)介紹

更新時(shí)間：2013年12月31日 15:50:51 作者：

checkbox全選涉及到的知識點(diǎn)比如IE里起作用，火狐不起作用，getElementById()與getElementsByName()的區(qū)別等等

1、IE里起作用，火狐不起作用

IE版本

 
<script type="text/javascript"> 

function checkALL(str)//全選控制的JS 
{ 
var a=document.getElementsByName(str); 
var n=a.length; 

for(var i=0;i<n;i++) 

{ 

a[i].checked=window.event.srcElement.checked; 

} 

} 

</script>

火狐版本

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 

function checkALL(str)//全選控制的JS 
{ 
var a=document.getElementsByName(str); 
var n=a.length; 
for(var i=0;i<n;i++){ 
a[i].checked=document.getElementById("all").checked; 
} 
} 

</script> 

原因分析：window.event只能在IE下運(yùn)行，所以在火狐下js運(yùn)行不起作用?；鸷姹纠镱^，是直接獲得"id=all"的checkbox被選擇狀態(tài)，然后賦值給"name=str"的checkbox組的每一項(xiàng)，這樣就可以保持選擇狀態(tài)的同步。

2、document.getElementById()與document.getElementsByName()的區(qū)別

上面那段js通過兩種方式獲得了checkbox的狀態(tài)，從名字上看，他們的作用應(yīng)該是類似，一個(gè)通過id獲得元素，一個(gè)通過name獲得元素。但這兩個(gè)方法是有差別的，如果在使用過程中不注意，很可能會(huì)覺得可以混用，從而會(huì)造成困擾。我當(dāng)時(shí)就覺得隨便用一個(gè)就好，但改名字后，js代碼卻不起作用，其實(shí)是因?yàn)椴涣私?，?dǎo)致用錯(cuò)了。

（1）document.getElementById()是通過id訪問某一個(gè)特定元素，因?yàn)樵谝粋€(gè)頁面中id是唯一的，所以這個(gè)函數(shù)返回的是一個(gè)Element

（2）document.getElementsByName()是通過name來訪問元素，因?yàn)樵谝粋€(gè)頁面中name不是唯一的，可以重名，所以這個(gè)函數(shù)返回的是一組Elements

正是因?yàn)橐粋€(gè)是元素，一個(gè)是數(shù)組，所以在混用的時(shí)候不注意就會(huì)出錯(cuò)，導(dǎo)致js運(yùn)行不下去。比如，當(dāng)時(shí)我把a(bǔ)[i].checked=document.getElementById("all").checked;改成a[i].checked=document.getElementsByName("all").checked;的時(shí)候，js運(yùn)行不起作用（因?yàn)閖s出錯(cuò)但不報(bào)錯(cuò)，所以感覺是沒起作用），其實(shí)此處并不是不識別，是因?yàn)檎{(diào)用的時(shí)候用錯(cuò)了，正確寫法是a[i].checked=document.getElementsByName("all")[0].checked;這樣改后，效果一樣。因?yàn)槲覀兊捻撁嬷兄淮嬖谝粋€(gè)"name=all"的checkbox，所以我們以[0]來取Elements中的第一個(gè)元素，就是我們通過a[i].checked=document.getElementById("all").checked;獲得的那個(gè)元素。