jQuery判斷checkbox選中狀態(tài)
前言
神奇的JQuery怎么設(shè)置checkbox狀態(tài)時(shí)好時(shí)壞?明明同一行代碼,斷點(diǎn)跟蹤確實(shí)執(zhí)行了,但是有時(shí)候好使,有時(shí)候卻沒(méi)有生效。畢竟對(duì)JS不是很熟悉,只是通過(guò)JS來(lái)處理前端HTML的標(biāo)簽的狀態(tài)設(shè)置時(shí),通過(guò)JQuery有時(shí)候會(huì)更方便些的,但是發(fā)現(xiàn)更不好辦。
今天嘗試實(shí)現(xiàn)checkbox全選、全不選功能,與App開發(fā)中的效果是一樣的,勾選全選則將所有的選項(xiàng)都選中;同樣取消勾選某個(gè)子項(xiàng)也將全選設(shè)置為非選中狀態(tài);所有子選項(xiàng)都為選中狀態(tài)時(shí),將全選設(shè)置為選中狀態(tài)。
由于對(duì)JS不是很熟悉,于是嘗試各種百度、google,發(fā)現(xiàn)出來(lái)的文章都是坑爹啊。各種JQuery的,但是為什么我設(shè)置了就是沒(méi)有作用的。起初以為是變量獲取不到,于是斷點(diǎn)跟蹤,對(duì)象是取到了的,但是設(shè)置JQuery的方法來(lái)設(shè)置就是沒(méi)有作用。
搜到的處理方式
這里的checkbox的id為cbxSelectAll,于是嘗試這么寫:
$('#cbxSelectAll').attr('checked', true);
結(jié)果是無(wú)效的。再嘗試修改為:
$('#cbxSelectAll').attr('checked', 'checked');
結(jié)果是第一次設(shè)置生效了,再設(shè)置就沒(méi)有生效??拥?,這到底是什么東西,怎么時(shí)好時(shí)壞呢?
然后在設(shè)置為false時(shí),這么寫:
$('#cbxSelectAll').attr('checked', false);
// 也沒(méi)有作用
//$('#cbxSelectAll').attr('checked', '');
果然是都沒(méi)有作用。但是通過(guò)下面的設(shè)置,可以取消選中:
$('#cbxSelectAll').removeAttr('checked');
難道是年代久遠(yuǎn),這些方法已經(jīng)不再有效了嗎?
最后解決辦法
最后的解決辦法還是放棄了JQuery,改用Javascript原生的Dom來(lái)設(shè)置。
下面是設(shè)置為全選或者取消全選狀態(tài)的代碼:
varcheckboxes = document.getElementsByName('selectIds'); varselectedCount = 0; varunSelectCount = 0; for (var i = 0; i < checkboxes.length; i++) { varcheckbox = checkboxes[i]; if(checkbox.tagName == "INPUT" && checkbox.checked){ selectedCount++; } else if (checkbox.tagName == "INPUT" && checkbox.checked == false) { unSelectCount++; } } if (selectedCount == checkboxes.length) { document.getElementById('cbxSelectAll').checked = true; } else if (unSelectCount != checkboxes.length) { document.getElementById('cbxSelectAll').checked = false; }
JQuery獲取狀態(tài)
JQuery通過(guò)checkbox的is函數(shù)來(lái)獲取狀態(tài):
varisChecked = $('#cbxSelectAll').is(':checked');
之前嘗試過(guò)使用attr函數(shù)來(lái)獲取,但是獲取的值顯示為null:
// 顯示為null,好生奇怪
varisChecked = $('#cbxSelectAll').attr('checked');
當(dāng)然,我們也可以直接使用Javascript原生的Dom方式來(lái)獲取,肯定是沒(méi)有問(wèn)題的:
varisChecked = document.getElementById('cbxSelectAll').checked;
小結(jié)
玩前端JQuery果然要比玩原生的JavaScript要吃力些,雖然有很多時(shí)候可以使代碼更方便書寫。不過(guò)還是兩者結(jié)合來(lái)做吧。
- jquery判斷input值不為空的方法
- 使用jQuery判斷瀏覽器滾動(dòng)條位置的方法
- jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
- Jquery判斷form表單數(shù)據(jù)是否變化
- 使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
- jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
- jquery判斷輸入密碼兩次是否相等
- jquery判斷密碼強(qiáng)度的驗(yàn)證代碼
- jquery判斷當(dāng)前瀏覽器的實(shí)現(xiàn)代碼
- asp.net 獲取數(shù)據(jù)庫(kù)連接字符串
相關(guān)文章
Jquery創(chuàng)建一個(gè)層當(dāng)鼠標(biāo)移動(dòng)到層上面不消失效果
使用Jquery創(chuàng)建一個(gè)層,實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到層上面不消失,示例代碼如下,感興趣的朋友可以參考下2013-12-12jQuery晃動(dòng)層特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery晃動(dòng)層特效實(shí)現(xiàn)方法,實(shí)例分析了animate方法與css樣式的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03easyui簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了easyui簡(jiǎn)介,詳細(xì)的介紹了什么是easyui和easyui的用法,有興趣的可以了解一下2017-07-07jquery插件之定時(shí)查詢待處理任務(wù)數(shù)量
這篇文章主要介紹了jquery定時(shí)查詢待處理任務(wù)數(shù)量插件示例2014-05-05jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery插件zTree針對(duì)節(jié)點(diǎn)的遍歷與獲取操作相關(guān)技巧,需要的朋友可以參考下2017-03-03用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法
本篇文章主要是對(duì)JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jQuery實(shí)現(xiàn)的輸入框選擇時(shí)間插件用法實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的輸入框選擇時(shí)間插件用法,實(shí)例分析了jQuery插件jquery.settime.js的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02