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要吃力些,虽然有很多时候可以使代码更方便书写。不过还是两者结合来做吧。
相关文章
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25C#遍历得到checkboxlist选中值和设置选中项的代码
这篇文章主要介绍了C#遍历得到checkboxlist选中值和设置选中项的代码,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下...2020-06-25jquery checkbox无法用attr()二次勾选问题的解决方法
下面小编就为大家带来一篇jquery checkbox无法用attr()二次勾选问题的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-29- 这篇文章主要为大家详细介绍了vue使用vant中的checkbox实现全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-17
- 下面小编就为大家带来一篇jq checkbox 的全选并ajax传参的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-03
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04- 下面小编就为大家带来一篇jQuery 更改checkbox的状态,无效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-29
Jquery和angularjs获取check框选中的值的方法汇总
本文分别通过具体的实例向大家展示了jquery和angularjs获取获取check框选中的值的方法,非常的简单实用,有需要的小伙伴可以参考下...2016-01-20实现DataGridView控件中CheckBox列的使用实例
最近做WindowsForms程序,使用DataGridView控件时,加了一列做选择用,发现CheckBox不能选中。搜索后,要实现DataGridView的CellContentClick事件,将代码贴一下...2021-09-22jquery捕捉回车键及获取checkbox值与异步请求的方法
这篇文章主要介绍了jquery捕捉回车键及获取checkbox值与异步请求的方法,实例分析了jQuery针对回车键的捕捉,checkbox值的获取以及异步请求的响应等相关技巧,需要的朋友可以参考下...2015-12-25- DataGridView中CheckBox实现某一列单选,需要的朋友可以参考一下...2021-09-22
- 代码如下 复制代码 <form action="?action=doing" method="post"> <input name="ID_Dele[]" type="checkbox" id="ID_Dele[]" value="1...2016-11-25
- checkbox在html中是以数组形式存储的,如果我们要获取用户选择了我个checkbox值我们可以利用遍历或直接把数组利用implode转换在字符进行存储。 php要求同名表单元...2016-11-25
ASP.NET DropDownListCheckBox使用示例(解决回发问题)
本文为大家介绍下ASP.NET DropDownListCheckBox的使用,这个是根据LigerUI改的,解决了回发问题,喜欢的朋友可以参考下...2021-09-22- 这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14
asp.net动态产生checkbox(数据源为DB或内存集合)
动态产生一组checkbox(数据源为DB或内存集合)且post提交时后台能及时获取等等,打算使用repeater+input(checkbox)+input(hidden)来实现...2021-09-22- 这篇文章主要介绍了PHP中CheckBox多选框上传失败的代码写法,以及php处理checkbox复选框表单提交问题,需要的朋友可以参考下...2017-02-18
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
下面小编就为大家带来一篇用自定义图片代替原生checkbox实现全选,删除以及提交的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-20- Repeater控件,每个item前有一个CheckBox,把选择的item列显出来,有两个地方需要注意的,就是CheckBox与Label,这个Label是随你需要获取的内容而变化喔。如你想获取Nickname,那你需要把绑定的的内容放在Label上...2021-09-22
- <?php教程 session_start();?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h...2016-11-25