前言

神奇的JQuery怎么設置checkbox狀態(tài)時好時壞？明明同一行代碼，斷點跟蹤確實執(zhí)行了，但是有時候好使，有時候卻沒有生效。畢竟對JS不是很熟悉，只是通過JS來處理前端HTML的標簽的狀態(tài)設置時，通過JQuery有時候會更方便些的，但是發(fā)現(xiàn)更不好辦。

今天嘗試實現(xiàn)checkbox全選、全不選功能，與App開發(fā)中的效果是一樣的，勾選全選則將所有的選項都選中；同樣取消勾選某個子項也將全選設置為非選中狀態(tài)；所有子選項都為選中狀態(tài)時，將全選設置為選中狀態(tài)。

由于對JS不是很熟悉，于是嘗試各種百度、google，發(fā)現(xiàn)出來的文章都是坑爹啊。各種JQuery的，但是為什么我設置了就是沒有作用的。起初以為是變量獲取不到，于是斷點跟蹤，對象是取到了的，但是設置JQuery的方法來設置就是沒有作用。

搜到的處理方式

這里的checkbox的id為cbxSelectAll，于是嘗試這么寫：

結果是無效的。再嘗試修改為：

結果是第一次設置生效了，再設置就沒有生效?？拥@到底是什么東西，怎么時好時壞呢？

然后在設置為false時，這么寫：

果然是都沒有作用。但是通過下面的設置，可以取消選中：

難道是年代久遠，這些方法已經(jīng)不再有效了嗎？

最后解決辦法

最后的解決辦法還是放棄了JQuery，改用Javascript原生的Dom來設置。

下面是設置為全選或者取消全選狀態(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通過checkbox的is函數(shù)來獲取狀態(tài)：

之前嘗試過使用attr函數(shù)來獲取，但是獲取的值顯示為null：

當然，我們也可以直接使用Javascript原生的Dom方式來獲取，肯定是沒有問題的：

小結

玩前端JQuery果然要比玩原生的JavaScript要吃力些，雖然有很多時候可以使代碼更方便書寫。不過還是兩者結合來做吧。

最新評論