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

相关文章
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
66 1
|
JavaScript
jQuery 复选框 checkbox 取值和赋值
jQuery 复选框 checkbox 取值和赋值
135 0
|
JavaScript
jQuery取消checkbox选中状态
jQuery取消checkbox选中状态
53 0
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
52 0
|
JavaScript 前端开发
一行jQuery代码搞定checkbox 全选和全不选
一行jQuery代码搞定checkbox 全选和全不选
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
137 0
|
JavaScript 前端开发
Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
279 0