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

JQuery checkbox check/uncheck

简介:
+关注继续查看

想通过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,如需转载请自行联系原作者

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

相关文章
17 网络编程
Java SE提供java.net包,其中包含了网络编程所需要的最基础一些类和接口。这些类和接口面向两个不同的层次:基于Socket的低层次网络编程和基于URL的高层次网络编程,所谓高低层次就是通信协议的高低层次,Socket采用TCP、UDP等协议,这些协议属于低层次的通信协议;URL采用HTTP和HTTPS这些属于高层次的通信协议。低层次网络编程,因为它面向底层,比较复杂,但是“低层次网络编程”并不等于它功能不强大。恰恰相反,正因为层次低,Socket编程与基于URL的高层次网络编程比较,能够提供更强大的功能和更灵活的控制,但是要更复杂一些。
5 0
地图可视化不只是pyecharts.map
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一。不可否认,pyecharts绘制的地图实现方便、图形美观而且支持交互,但在面对不同需求时,其实我们还有很多其他手段实现地图可视化。
4 0
6. 使用antd pro构建web页面
在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段。这里假定我们已经了解了react,redux和dva/umi相关的知识。并有做过相关练习。 如果还不了解以上相关的知识,建议去以下网站学习一遍,下面给出一个大概学习的路线吧。
5 0
【Kotlin 初学者】枚举类-密封类-数据类-继承(下)
三、数据类 3.1 创建数据类 3.2 toString、equals和hashCode的个性化实现 3.3 ==符号 3.4 copy() 函数 3.5 解构声明 四、 继承(extend) 4.1 Any 超类 4.2 继承类 4.3 函数重写 4.4 属性重写 4.5 类型检测(is)
4 0
Nacos配置中心交互模型是 push 还是 pull ?你应该这么回答
对于Nacos大家应该都不太陌生,出身阿里名声在外,能做动态服务发现、配置管理,非常好用的一个工具。然而这样的技术用的人越多面试被问的概率也就越大,如果只停留在使用层面,那面试可能要吃大亏。
6 0
Java开发初级5.24.2
Java开发初级5.24.2
7 0
利用JS筛选数组方法一
利用JS筛选数组方法一
6 0
利用JS筛选数组方法二
利用JS筛选数组方法二
4 0
利用JS实现猜数字小游戏
利用JS实现猜数字小游戏
3 0
elasticsearch-head插件的使用
由于es服务启动之后,访问界面比较丑陋,为了更好的查看索引库当中的信息,我们可以通过安装elasticsearch-head这个插件来实现,这个插件可以更方便快捷的看到es的管理界面
7 0
941
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载