jQuery判断checkbox选中状态


Posted in Javascript onMay 12, 2016

前言

神奇的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要吃力些,虽然有很多时候可以使代码更方便书写。不过还是两者结合来做吧。

Javascript 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
Bootstrap 组件之按钮(二)
May 11 #Javascript
You might like
main.php
2006/12/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
YII路径的用法总结
2014/07/09 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
Yii配置文件用法详解
2014/12/04 PHP
js获取事件源及触发该事件的对象
2013/10/24 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
JS实现瀑布流效果
2020/03/07 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python提取页面内url列表的方法
2015/05/25 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python numpy数组复制使用实例解析
2020/01/10 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
发展部经理职责规定
2014/02/22 职场文书
岗位竞聘书范文
2014/03/31 职场文书
第二课堂活动总结
2014/05/07 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
人力资源部岗位职责
2015/02/11 职场文书
员工自我工作评价
2015/03/06 职场文书
网络舆情信息简报
2015/07/21 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技
TS 类型收窄教程示例详解
2022/09/23 Javascript