您的位置:首页 > Web前端 > JQuery

jquery如何判断checkbox(复选框)是否被选中 全选 反选

2017-06-28 17:36 796 查看
好长时间没用jq, 之前用的都是ng。

想着随便参考一下,结果被坑。因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google

给出坑人文章的链接 http://www.cnblogs.com/yuzhongwusan/archive/2009/02/27/1399264.html

虽然已经解决,但是我决定重新写一篇!!!

如何判断checkbox是否选中?

文中说用
attr()
在实际判断的时候都是不可用的,判断不出来!!!

应该使用

if ($("#id").is(":checked")) {
// 存在
} else {
// 不存在
}

看到这里除了checked 还能判断什么呢?





除了判断checkout好像没有看到hover,类似于这种应该如何判断呢?

我们知道 如果
$()
选择器找到一个元素必定存在一个长度,因此我们也可以根据长度去判断

if ($('#id:hover').length) {
// 元素存在
} else {
// 元素不存在
}

感觉有点跑偏了,回归正题。。。

如果修改呢,很多人用的attr,removeAttr, 这些都是错误的,尤其是remove属性后用attr无法加回来

这里应该使用
pop
,而不是
attr


官方建议 具有 true 和 false 两个属性的属性,如
checked
,
selected
或者
disabled
使用
prop()
,其他的使用
attr()




代码如下

<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="case" /> Option 1</label></p>
<p><label><input type="checkbox" class="case" /> Option 2</label></p>
<p><label><input type="checkbox" class="case" /> Option 3</label></p>
<p><label><input type="checkbox" class="case" /> Option 4</label></p>
</fieldset>
</form>

$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

demo http://jsfiddle.net/mayufo/8dxx5fjk/

这时候傻呵呵以为你做完了就错了!!!你还没有考虑全选后取消一个和全部一个个选中后全选按钮

与全选按钮关联

$('.case').on('click', function () {
if ($('.case').length == $('.case:checked').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
})

demo http://jsfiddle.net/mayufo/8dxx5fjk/1/

参考文章

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: