jQuery 操作复选框(checkbox) attr checked不起作用

这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,true); 都不好使,要么第一次成功了,第二次调用就没反应,完全不起作用了。那到底是什么原因呢?

害得‘跑客教授’到处到网上搜 jQuery checkbox的操作,动态选择的相关文章,都写着是这样的实现代码


<span style="font-size:18px;">$('input[type=checkbox]').attr('checked','checked');//全选,设置属性
$('input[type=checkbox]').attr('checked',true);//全选,设置属性,通过true布尔值形式
$('input[type=checkbox]').attr('checked',false);//不选择,布尔值形式
$('input[type=checkbox]').removeAttr('checked','checked');//不选选,删除属性</span>

但是测试结果发现,屡试不爽啊,选择一次全选,再调用一次反选,再去调用全选就没效果了。
难道是 removeAttr 的原因?还是‘跑客教授’使用过新的 jQuery 1.9.1版本。(还是说我要使用原生的javascript代码来完成这项工作呢?)

这些都不是理由,理由应该 是自己没有用好。不可能这么牛比的框架这么简单的功能都不能实现(也不要轻意怀疑浏览器的问题)

最终解决方案

还是到官网,搜索了’checkbox’,找到一文章,仔细查看了吓,有一个类似的操作是


<span style="font-size:18px;">$('obj').prop('checked',true);
$('obj').prop('checked',false);</span>

好了,擦亮你的眼睛,没错最后用的是 prop方法操作一切就OK啦。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这两个问题需要分别回答。 首先是HTML树形菜单折叠的CSS实现,可以通过以下代码实现: HTML结构: ``` <ul class="tree"> <li> <input type="checkbox" id="folder1" /> <label for="folder1">Folder 1</label> <ul> <li><a href="#">File 1.1</a></li> <li><a href="#">File 1.2</a></li> <li><a href="#">File 1.3</a></li> </ul> </li> <li> <input type="checkbox" id="folder2" /> <label for="folder2">Folder 2</label> <ul> <li><a href="#">File 2.1</a></li> <li><a href="#">File 2.2</a></li> <li><a href="#">File 2.3</a></li> </ul> </li> </ul> ``` CSS样式: ``` .tree ul { margin-left: 20px; list-style: none; display: none; } .tree li input[type="checkbox"] + label { cursor: pointer; } .tree li input[type="checkbox"]:checked ~ ul { display: block; } ``` 其中,通过`display: none`将子节点的UL标签隐藏起来,然后通过`input[type="checkbox"]`和`label`标签实现点击展开/折叠的功能,最后通过`checked`属性和`~`选择器将选中的节点下的子节点UL标签展开。 接下来是目录树折叠菜单jquery版(复选框)的实现,可以通过以下代码实现: HTML结构: ``` <ul class="tree"> <li> <input type="checkbox" id="folder1" /> <label for="folder1">Folder 1</label> <ul> <li><a href="#">File 1.1</a></li> <li><a href="#">File 1.2</a></li> <li><a href="#">File 1.3</a></li> </ul> </li> <li> <input type="checkbox" id="folder2" /> <label for="folder2">Folder 2</label> <ul> <li><a href="#">File 2.1</a></li> <li><a href="#">File 2.2</a></li> <li><a href="#">File 2.3</a></li> </ul> </li> </ul> ``` jQuery代码: ``` $(document).ready(function() { // 折叠/展开所有节点 $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').on('click', function(e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(':visible')) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); }); // 处理复选框 $('.tree li input[type="checkbox"]').on('change', function() { var checked = $(this).prop('checked'); var children = $(this).parent('li.parent_li').find(' > ul > li input[type="checkbox"]'); children.prop('checked', checked); }); }); ``` 其中,通过添加`parent_li`类将含有子节点的LI标签标记为父节点,然后使用`click`事件实现点击折叠/展开的功能。同时,通过`change`事件处理复选框的选中状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值