jQuery判断checkbox选中状态

jQuery判断checkbox选中状态
前⾔
神奇的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要吃⼒些，虽然有很多时候可以使代码更⽅便书写。

不过还是两者结合来做吧。