JavaScript實(shí)現(xiàn)表單全選或反選效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)表單全選或反選的具體代碼,供大家參考,具體內(nèi)容如下
表單中常常會(huì)用到checkbox復(fù)選框,通過復(fù)選框做出的列表全選或全不選的效果也是很常見的,比如購物車的商品列表,所以本篇也是對這一種常見功能的選擇效果及其底層的實(shí)現(xiàn)思路及代碼進(jì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ù)選框每一個(gè)的checked的值都等于當(dāng)前全選按鈕的checked的值,所以它們的狀態(tài)就會(huì)一致了 } } // 2.tbody里面的復(fù)選框的事件:下面全選中了則全選按鈕也要為選中狀態(tài),若有至少一個(gè)未選中則全選按鈕也為未選中狀態(tài),注意:tbody里面的復(fù)選框每一次被點(diǎn)擊都需要做判斷,看是否所有的復(fù)選框都被選中了 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].onclick = function () { // flag 用于控制全選按鈕是否選中 var flag = true; // 每次點(diǎn)擊下面的復(fù)選框都要循環(huán)檢查4個(gè)復(fù)選框是否全被選中了 for (var i = 0; i < j_tbs.length; i++) { console.log('---'+j_tbs[i].checked); if (j_tbs[i].checked == false) { // 有一個(gè)按鈕沒有被選中就執(zhí)行內(nèi)部代碼修改flag的值為false flag = false; break; // 退出里層for循環(huán),這樣可以提高執(zhí)行效率,因?yàn)橹灰幸粋€(gè)沒有被選中,剩下的就無需再判斷了 } } j_cbAll.checked = flag; // 循環(huán)結(jié)束后將flag的值給全選按鈕 } } </script>
執(zhí)行代碼截圖:
點(diǎn)擊全選時(shí):再點(diǎn)擊一次:
當(dāng)選中下方的復(fù)選框時(shí):
注:下方的四個(gè)復(fù)選框沒有被全選則上方的全選按鈕不會(huì)被選中。
內(nèi)部JS實(shí)現(xiàn)思路主要分為兩部分:第一部分是“全選”按鈕的功能,當(dāng)它為選中時(shí)那么下面的所有復(fù)選框的checked = true,注意:這個(gè)值是本功能實(shí)現(xiàn)的關(guān)鍵,若“全選”按鈕為未選中狀態(tài)時(shí)則它的checked的值為false,所以再把這個(gè)值賦值給下面所有的子復(fù)選框即可;第二部分是下面的子復(fù)選框的點(diǎn)擊選中功能以及它們的狀態(tài)一起決定的“全選”按鈕的狀態(tài),下面全選中了則全選按鈕也要為選中狀態(tài),若有至少一個(gè)未選中則全選按鈕也為未選中狀態(tài),注意:子復(fù)選框的每一次被點(diǎn)擊都需要做判斷,看是否所有的復(fù)選框都被選中了。(建議結(jié)合代碼分析,代碼內(nèi)含詳細(xì)注釋解析)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
百度地圖API之百度地圖退拽標(biāo)記點(diǎn)獲取經(jīng)緯度的實(shí)現(xiàn)代碼
這篇文章主要介紹了百度地圖API之百度地圖退拽標(biāo)記點(diǎn)獲取經(jīng)緯度的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-01-01Knockoutjs 學(xué)習(xí)系列(二)花式捆綁
這篇文章主要介紹了Knockoutjs 學(xué)習(xí)系列(二)花式捆綁 的相關(guān)資料,主要介紹了knockoutjs中各種綁定的使用方法,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09