全選復(fù)選框JavaScript編寫小結(jié)(附代碼)
更新時(shí)間:2017年08月16日 11:03:21 作者:代碼終結(jié)者222
這篇文章主要介紹了全選”復(fù)選框JavaScript編寫,分別附上html和js代碼以供大家更深刻了解,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。
對(duì)于全選框的操作分為兩種情況:
1.單擊全選框,下面全部選中
2.單擊下面的復(fù)選框,全部點(diǎn)擊上,全選框被選中,否則全選框沒有選中。
html樣式
<tr>
<td>愛 好</td>
<td>
<label for=""><input type="checkbox" name="fav" id="" value="蘋果" class="btn"/>蘋果</label>
</td>
<td>
<label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label>
</td>
<td>
<label for=""><input type="checkbox" name="" id="checkAll" value="全選" class="btn"/>全選</label>
</td>
</tr>
js樣式
var oChkAll = document.getElementById("checkAll");
//全選
oChkAll.onclick = function() {
for(var i = 0; i < oFav.length; i++) {
oFav[i].checked = this.checked;
}
}
//復(fù)選框組
for(var i = 0; i < oFav.length; i++) {
oFav[i].onclick = function() {
//如果全選
if(isChkAll()) {
oChkAll.checked = true;
} else {
oChkAll.checked = false;
}
}
}
//判斷是否全選
function isChkAll() {
var all = oFav.length;
var chk = 0;
for(var i = 0; i < oFav.length; i++) {
if(oFav[i].checked) {
chk++;
}
}
if(all == chk) {
return true;
} else {
return false;
}
}
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持!
您可能感興趣的文章:
相關(guān)文章
用JavaScript實(shí)現(xiàn)頁面重定向功能的教程
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)頁面重定向功能的教程,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript中匿名函數(shù)的用法及優(yōu)缺點(diǎn)詳解
下面小編就為大家?guī)硪黄狫avaScript中匿名函數(shù)的用法及優(yōu)缺點(diǎn)詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
一起來學(xué)習(xí)JavaScript的語法基礎(chǔ)
這篇文章主要為大家詳細(xì)介紹了JavaScript的語法基礎(chǔ),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03
JavaScript DOM 學(xué)習(xí)第二章 編輯文本
在這一章我會(huì)給出一個(gè)在CMS里非常有用的更新頁面的代碼。在任一段落點(diǎn)擊鼠標(biāo)你就可以修改了。完成以后點(diǎn)擊按鈕,修改的文本就顯示了。2010-02-02

