checkbox全選所涉及的知識點介紹_javascript技巧

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

IE版本

複製代碼 程式碼如下:

火狐版本

複製代碼 代碼如下:

原因分析：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;獲得的那個元素。