jQuery判斷checkbox選中狀態，jquerycheckbox選中

jQuery判斷checkbox選中狀態，jquerycheckbox選中

前言

神奇的JQuery怎麼設定checkbox狀態時好時壞？明明同一行代碼，斷點跟蹤確實執行了，但是有時候好使，有時候卻沒有生效。畢竟對JS不是很熟悉，只是通過JS來處理前端HTML的標籤的狀態設定時，通過JQuery有時候會更方便些的，但是發現更不好辦。

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

由於對JS不是很熟悉，於是嘗試各種百度、google，發現出來的文章都是坑爹啊。各種JQuery的，但是為什麼我設定了就是沒有作用的。起初以為是變數擷取不到，於是斷點跟蹤，對象是取到了的，但是設定JQuery的方法來設定就是沒有作用。

搜到的處理方式

這裡的checkbox的id為cbxSelectAll，於是嘗試這麼寫：

複製代碼 代碼如下:
$('#cbxSelectAll').attr('checked', true);

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

複製代碼 代碼如下:
$('#cbxSelectAll').attr('checked', 'checked');

結果是第一次設定生效了，再設定就沒有生效。坑爹，這到底是什麼東西，怎麼時好時壞呢？

然後在設定為false時，這麼寫：

複製代碼 代碼如下:
$('#cbxSelectAll').attr('checked', false);
// 也沒有作用
//$('#cbxSelectAll').attr('checked', '');

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

複製代碼 代碼如下:
$('#cbxSelectAll').removeAttr('checked');

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

最後解決辦法

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

下面是設定為全選或者取消全選狀態的代碼：

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擷取狀態

JQuery通過checkbox的is函數來擷取狀態：

複製代碼 代碼如下:
varisChecked = $('#cbxSelectAll').is(':checked');

之前嘗試過使用attr函數來擷取，但是擷取的值顯示為null：

複製代碼 代碼如下:
// 顯示為null，好生奇怪
varisChecked = $('#cbxSelectAll').attr('checked');

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

複製代碼 代碼如下:
varisChecked = document.getElementById('cbxSelectAll').checked;

小結

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