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 相关文章推荐
javascript写的一个链表实现代码
Oct 25 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
使用angular写一个hello world
Jan 23 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
解析js如何获取css样式
Dec 11 Javascript
Ajax基础知识详解
Feb 17 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
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
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
使用python3构建文件传输的方法
2019/02/13 Python
python清空命令行方式
2020/01/13 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
求职信的要素有哪些呢
2013/12/26 职场文书
党课学习思想汇报
2014/01/02 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
活动总结新闻稿
2014/08/30 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript