checkbox全選所涉及到的知識點介紹

2019-11-20 21:20:23

字體：大中小

來源：轉載

供稿：網友

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>

火狐版本

復制代碼代碼如下:

 
<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下運行，所以在火狐下js運行不起作用。火狐版本里頭，是直接獲得"id=all"的checkbox被選擇狀態，然后賦值給"name=str"的checkbox組的每一項，這樣就可以保持選擇狀態的同步。

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

上面那段js通過兩種方式獲得了checkbox的狀態，從名字上看，他們的作用應該是類似，一個通過id獲得元素，一個通過name獲得元素。但這兩個方法是有差別的，如果在使用過程中不注意，很可能會覺得可以混用，從而會造成困擾。我當時就覺得隨便用一個就好，但改名字后，js代碼卻不起作用，其實是因為不了解，導致用錯了。

（1）document.getElementById()是通過id訪問某一個特定元素，因為在一個頁面中id是唯一的，所以這個函數返回的是一個Element

（2）document.getElementsByName()是通過name來訪問元素，因為在一個頁面中name不是唯一的，可以重名，所以這個函數返回的是一組Elements

正是因為一個是元素，一個是數組，所以在混用的時候不注意就會出錯，導致js運行不下去。比如，當時我把a[i].checked=document.getElementById("all").checked;改成a[i].checked=document.getElementsByName("all").checked;的時候，js運行不起作用（因為js出錯但不報錯，所以感覺是沒起作用），其實此處并不是不識別，是因為調用的時候用錯了，正確寫法是a[i].checked=document.getElementsByName("all")[0].checked;這樣改后，效果一樣。因為我們的頁面中只存在一個"name=all"的checkbox，所以我們以[0]來取Elements中的第一個元素，就是我們通過a[i].checked=document.getElementById("all").checked;獲得的那個元素。

上一篇：js判斷字符長度以及中英文數字等

下一篇：用js+iframe形成頁面的一種遮罩效果的具體實現