checkbox全選所涉及到的知識點介紹
更新時間：2013年12月31日 15:50:51 作者：
checkbox全選涉及到的知識點比如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>
火狐版本
<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被選擇狀態(tài)，然后賦值給"name=str"的checkbox組的每一項，這樣就可以保持選擇狀態(tài)的同步。
2、document.getElementById()與document.getElementsByName()的區(qū)別
上面那段js通過兩種方式獲得了checkbox的狀態(tài)，從名字上看，他們的作用應(yīng)該是類似，一個通過id獲得元素，一個通過name獲得元素。但這兩個方法是有差別的，如果在使用過程中不注意，很可能會覺得可以混用，從而會造成困擾。我當時就覺得隨便用一個就好，但改名字后，js代碼卻不起作用，其實是因為不了解，導(dǎo)致用錯了。
（1）document.getElementById()是通過id訪問某一個特定元素，因為在一個頁面中id是唯一的，所以這個函數(shù)返回的是一個Element
（2）document.getElementsByName()是通過name來訪問元素，因為在一個頁面中name不是唯一的，可以重名，所以這個函數(shù)返回的是一組Elements
正是因為一個是元素，一個是數(shù)組，所以在混用的時候不注意就會出錯，導(dǎo)致js運行不下去。比如，當時我把a[i].checked=document.getElementById("all").checked;改成a[i].checked=document.getElementsByName("all").checked;的時候，js運行不起作用（因為js出錯但不報錯，所以感覺是沒起作用），其實此處并不是不識別，是因為調(diào)用的時候用錯了，正確寫法是a[i].checked=document.getElementsByName("all")[0].checked;這樣改后，效果一樣。因為我們的頁面中只存在一個"name=all"的checkbox，所以我們以[0]來取Elements中的第一個元素，就是我們通過a[i].checked=document.getElementById("all").checked;獲得的那個元素。
IE版本
復(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=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下運行，所以在火狐下js運行不起作用?；鸷姹纠镱^，是直接獲得"id=all"的checkbox被選擇狀態(tài)，然后賦值給"name=str"的checkbox組的每一項，這樣就可以保持選擇狀態(tài)的同步。
2、document.getElementById()與document.getElementsByName()的區(qū)別
上面那段js通過兩種方式獲得了checkbox的狀態(tài)，從名字上看，他們的作用應(yīng)該是類似，一個通過id獲得元素，一個通過name獲得元素。但這兩個方法是有差別的，如果在使用過程中不注意，很可能會覺得可以混用，從而會造成困擾。我當時就覺得隨便用一個就好，但改名字后，js代碼卻不起作用，其實是因為不了解，導(dǎo)致用錯了。
（1）document.getElementById()是通過id訪問某一個特定元素，因為在一個頁面中id是唯一的，所以這個函數(shù)返回的是一個Element
（2）document.getElementsByName()是通過name來訪問元素，因為在一個頁面中name不是唯一的，可以重名，所以這個函數(shù)返回的是一組Elements
正是因為一個是元素，一個是數(shù)組，所以在混用的時候不注意就會出錯，導(dǎo)致js運行不下去。比如，當時我把a[i].checked=document.getElementById("all").checked;改成a[i].checked=document.getElementsByName("all").checked;的時候，js運行不起作用（因為js出錯但不報錯，所以感覺是沒起作用），其實此處并不是不識別，是因為調(diào)用的時候用錯了，正確寫法是a[i].checked=document.getElementsByName("all")[0].checked;這樣改后，效果一樣。因為我們的頁面中只存在一個"name=all"的checkbox，所以我們以[0]來取Elements中的第一個元素，就是我們通過a[i].checked=document.getElementById("all").checked;獲得的那個元素。
相關(guān)文章
本文主要介紹了js實現(xiàn)下一頁頁碼效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章為大家詳細主要介紹了用JavaScript實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08 
這篇文章主要介紹了JS實現(xiàn)的通用表單驗證插件,可針對常見的日期、密碼、姓名等進行驗證并給出提示信息,非常具有實用價值,需要的朋友可以參考下
2015-08-08 
js+css使DIV始終居于屏幕中間 左下 左上 右上 右下的代碼集合
js+css使DIV始終居于屏幕中間 左下 左上 右上 右下的代碼集合，需要的朋友可以參考下。
2011-03-03 
這篇文章主要介紹了Javascript中的作用域和上下文深入理解,本文講解了作用域 VS 上下文、變量作用域、“this”上下文、執(zhí)行上下文(Execution Context)、作用域鏈等內(nèi)容,需要的朋友可以參考下
2015-07-07 
組件是視圖層基本的組成單元，具備UI風(fēng)格樣式以及特定的功能效果。本文將通過示例詳細為大家介紹一下微信小程序中常用的視圖容器組件，需要的可以參考一下
2022-03-03 
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-10-10 
這篇文章主要為大家詳細介紹了js前端日歷控件，可根據(jù)日期自定義日歷上某日的顏色，另外可以懸浮，拖拽，自由變形
2017-03-03 
Javascript刷新頁面的幾種方法：location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新當前頁面一次呢
2023-09-09