JavaScript實現(xiàn)表單全選或反選效果
本文實例為大家分享了JavaScript實現(xiàn)表單全選或反選的具體代碼,供大家參考,具體內(nèi)容如下
表單中常常會用到checkbox復(fù)選框,通過復(fù)選框做出的列表全選或全不選的效果也是很常見的,比如購物車的商品列表,所以本篇也是對這一種常見功能的選擇效果及其底層的實現(xiàn)思路及代碼進行介紹、演示與分析,下面上JS代碼:
<script>
// 表單的全選與全不選案例:注:checkbox復(fù)選框的checked屬性值為true則為選中狀態(tài),為false則為未選中狀態(tài)
var j_cbAll = document.getElementById('j_cbAll'); // 獲取全選按鈕
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 獲取所有input復(fù)選框
// 注冊事件
// 1.全選按鈕的事件
j_cbAll.onclick = function () {
// this.checked可以獲取當(dāng)前復(fù)選框的狀態(tài)返回值為true或false
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked; // 讓tbody里的復(fù)選框每一個的checked的值都等于當(dāng)前全選按鈕的checked的值,所以它們的狀態(tài)就會一致了
}
}
// 2.tbody里面的復(fù)選框的事件:下面全選中了則全選按鈕也要為選中狀態(tài),若有至少一個未選中則全選按鈕也為未選中狀態(tài),注意:tbody里面的復(fù)選框每一次被點擊都需要做判斷,看是否所有的復(fù)選框都被選中了
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
// flag 用于控制全選按鈕是否選中
var flag = true;
// 每次點擊下面的復(fù)選框都要循環(huán)檢查4個復(fù)選框是否全被選中了
for (var i = 0; i < j_tbs.length; i++) {
console.log('---'+j_tbs[i].checked);
if (j_tbs[i].checked == false) { // 有一個按鈕沒有被選中就執(zhí)行內(nèi)部代碼修改flag的值為false
flag = false;
break; // 退出里層for循環(huán),這樣可以提高執(zhí)行效率,因為只要有一個沒有被選中,剩下的就無需再判斷了
}
}
j_cbAll.checked = flag; // 循環(huán)結(jié)束后將flag的值給全選按鈕
}
}
</script>
執(zhí)行代碼截圖:

點擊全選時:再點擊一次:

當(dāng)選中下方的復(fù)選框時:

注:下方的四個復(fù)選框沒有被全選則上方的全選按鈕不會被選中。
內(nèi)部JS實現(xiàn)思路主要分為兩部分:第一部分是“全選”按鈕的功能,當(dāng)它為選中時那么下面的所有復(fù)選框的checked = true,注意:這個值是本功能實現(xiàn)的關(guān)鍵,若“全選”按鈕為未選中狀態(tài)時則它的checked的值為false,所以再把這個值賦值給下面所有的子復(fù)選框即可;第二部分是下面的子復(fù)選框的點擊選中功能以及它們的狀態(tài)一起決定的“全選”按鈕的狀態(tài),下面全選中了則全選按鈕也要為選中狀態(tài),若有至少一個未選中則全選按鈕也為未選中狀態(tài),注意:子復(fù)選框的每一次被點擊都需要做判斷,看是否所有的復(fù)選框都被選中了。(建議結(jié)合代碼分析,代碼內(nèi)含詳細注釋解析)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
百度地圖API之百度地圖退拽標記點獲取經(jīng)緯度的實現(xiàn)代碼
這篇文章主要介紹了百度地圖API之百度地圖退拽標記點獲取經(jīng)緯度的實現(xiàn)代碼,需要的朋友可以參考下2017-01-01
Knockoutjs 學(xué)習(xí)系列(二)花式捆綁
這篇文章主要介紹了Knockoutjs 學(xué)習(xí)系列(二)花式捆綁 的相關(guān)資料,主要介紹了knockoutjs中各種綁定的使用方法,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
在原生不支持的舊環(huán)境中添加兼容的Object.keys實現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09

