這篇文章主要介紹了jQuery判斷checkbox選中狀態(tài)的相關(guān)資料，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

前言

神奇的JQuery怎么設(shè)置checkbox狀態(tài)時(shí)好時(shí)壞？明明同一行代碼，斷點(diǎn)跟蹤確實(shí)執(zhí)行了，但是有時(shí)候好使，有時(shí)候卻沒有生效。畢竟對(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è)置了就是沒有作用的。起初以為是變量獲取不到，于是斷點(diǎn)跟蹤，對(duì)象是取到了的，但是設(shè)置JQuery的方法來(lái)設(shè)置就是沒有作用。

搜到的處理方式

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

代碼如下:

$('#cbxSelectAll').attr('checked', true);

結(jié)果是無(wú)效的。再嘗試修改為：

代碼如下:

$('#cbxSelectAll').attr('checked', 'checked');

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

然后在設(shè)置為false時(shí)，這么寫：

代碼如下:

$('#cbxSelectAll').attr('checked', false);

// 也沒有作用

//$('#cbxSelectAll').attr('checked', '');

果然是都沒有作用。但是通過(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)獲取，肯定是沒有問(wèn)題的：

代碼如下:

varisChecked = document.getElementById('cbxSelectAll').checked;

小結(jié)

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