开发者社区> 浣熊干面包> 正文

JQuery checkbox check/uncheck

2017-11-22 1166

简介：

+关注继续查看

想通过JQuery来check或者uncheck页面上的checkbox控件，我们可能会想到用下面的代码：

$('#chk-all').on('click', function(){
    var checked = $(this).is(':checked');
    $("input[type='checkbox'][name='chk-att']").attr('checked', checked);
});

　　chk-all是一个checkbox控件，我们想通过点击它来实现全选或取消全选的功能。在onclick事件中，首先通过$(this).is(':checked')来获取该checkbox当前的选中状态，然后将页面上所有name='chk-att'的checkbox控件选中或取消选中。这里使用的方法是修改checked属性的值，然而该方法并不总是奏效，有时你会看到元素的属性值确实被修改了，但是选中状态并未改变。尝试将attr()方法改成removeAttr()来实现取消选中，仍然不起作用！

　　解决办法是使用prop()函数来替代上面代码中的attr()函数。将上面的代码修改如下：

$('#chk-all').on('click', function(){
    var checked = $(this).is(':checked');
    $("input[type='checkbox'][name='chk-att']").prop('checked', checked);
});

本文转自Jaxu博客园博客，原文链接：http://www.cnblogs.com/jaxu/p/5143637.html，如需转载请自行联系原作者

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

JavaScript

jQuery checkbox

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

Adobe Photoshop CC 打开时报错~配置错误：请卸载并重新安装该产品 2353 续上次的腾讯企业邮箱 2354 根据上一行填充本行的空白栏位，SQL处理方式 2034 前缀索引，一种优化索引大小的解决方案 1424 R语言数据的输入 1750

相关文章

五月呀

jquery 使用attr方法对checkBox进行全选和反选操作

一次点击按钮进行全选的时候，checkbox全部选中；再次点击的时候，checkbox取消选中。第二次，第三次，之后再点击，没有效果，代码也执行。checkbox的checked属性也改变，但是checkbox就是没有被选中。问题解决办法是把红色部分中的attr方法修改

36 0

Li.皮皮

Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码

Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码

169 0

嗯哼9925

jquery validate自定义checkbox验证规则和样式

1437 0

技术小牛人

[开发笔记]-jQuery获取checkbox选中项等操作及注意事项

1128 0

技术小美

jquery checkbox 点击事件

991 0

科技小能手

jQuery如何判断checkbox(复选框)是否被选中

1363 0

技术小牛人

jQuery获取动态表格中checkbox被选中一行的属性数据

1058 0

橘子红了呐

漂亮 [checkbox+radio]+label 自定义样式（jQuery ）

1423 0

科技小能手

jQuery操作radio，checkbox，select

1105 0

zting科技

jquery radio取值，checkbox取值，select取值及选中(引用)

1231 0

+关注

浣熊干面包

文章

问答

视频

作者高分内容

更多

Adobe Photoshop CC 打开时报错~配置错误：请卸载并重新安装该产品 2353 续上次的腾讯企业邮箱 2354 根据上一行填充本行的空白栏位，SQL处理方式 2034 前缀索引，一种优化索引大小的解决方案 1424 R语言数据的输入 1750

文章排行榜

最热

最新

1 万能架构设计：ES+Redis+MySQL，这套组合可应对80%业务场景（2） 29249

2 【数据可视化Python库】 29089

3 如何提高光伏发电效能异常检出效率的实践案例 26485

4 日志服务 SLS 和开源 ELK 全面对比 26244

5 Flink 2.0 启航，开启全新篇章 25693

6 阿里云蔡英华：Landing Zone助力生态伙伴成为企业云治理服务专家 23885

7 带你写一个Mp文件解析器-Mp3文件结构全解析(一) 22858

8 如何画好一张架构图？（3） 21127

9 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 13730

10 实践教程之体验PolarDB-X分布式事务和数据分区 8745

11 Python3，自从掌握了这个方法，再也不用print进行调试了。 11429

12 如何解决IoT数据入仓的客户实践 7026

13 现场直击：2023阿里云峰会精彩发布抢先看（内含福利） 331727

14 阿里云优惠口令（2023更新） 5586

15 大数据&AI产品月刊【2023年4月】 3737

16 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 53686

17 编程中最难的就是命名？这几招教你快速上手 31163

18 阿里云联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 49132

19 除了价格降70%，关于对象存储预留空间你还需要了解这些 30615

20 RocketMQ 多级存储设计与实现 20652

1 细说Dataphin自动解析 54

2 高手交锋，专业对决！阿里云重磅新品评测令！ 68

3 TechEmpower 21 轮 Web 框架性能评测 -- C# 的性能和 Rust、C++ 并驾齐驱 53

4 计组存储层次简析 61

5 电商行业实践专栏上线｜阿里巴巴风控实战如何解决大规模风控的技术难点？ 76

6 瑶池数据库SQL-问题二 512

7 阿里云开源数据库PolarDB分布式版入门训练营开营报名中！ 436

8 AIGC：在云上从0开始搭建langchain-ChatGLM，构建私域知识问答机器人DEMO 112

9 【操作系统】操作系统IO技术底层机制和ZeroCopy 10269

10 Spring Boot + URule规则引擎，太顶了！ 3922

11 go语言｜数据结构：二叉树可视化（制作svg格式树形图） 10140

12 Springboot整合Quartz 10215

13 go语言｜数据结构：二叉树（2）广度和深度搜索 59

14 在实际开发中接触到的SQL相关的需求内容 10316

15 常用Linux命令 - 权限管理的基本命令 10254

16 R绘图案例｜基于分面的面积图绘制 10365

17 一张图看懂专有云灾备 72

18 go语言｜数据结构：单链表（1） 58

19 浅谈设计模式 - 建造者模式（十七） 10259

20 Docker笔记9 | Docker中网络功能知识梳理和了解 10189

相关课程

更多

jQuery开发教程

16080

43

去学习

相关电子书

更多

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载

冬季实战营第三期：MySQL数据库进阶实战

立即下载