checkbox设置checked--true-但不勾选(使用$.attr('checked',true))无效
来源:互联网 发布:数据维护专员招聘 编辑:程序博客网 时间:2024/06/16 21:01
一、出现的问题及解决方法:
今天在写一个table相关插件的时候无意中发现了这样一个问题,记得以前在写这种控制checkbox选中与非选中的代码时并没有这种bug,当时也是用的checked属性,而现在却行不通了。
于是乎做了以下测试,测试demo:一个按钮控制checkbox的选中状态。
测试js代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
效果是第一回合点击有效:第一次点击选中,第二次点击非选中,从第三次点击开始就没有任何反应了,但是checkbox元素的checked属性却依然在切换:
即使是checked:”checked”也依然是非选中状态。当时我就懵逼了,wtf。
查了查jQuery版本,版本还挺新:
不是版本问题,突然想起控制checkbox选中状态的还有prop();遂拿来死马当活马医:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
解决问题,完美。来不及自我欣赏,迅速反过来查了查jquery中prop和attr的区别,立马恍然大悟后知后觉。
二、jquery中的attr和prop区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。
关于它们两个的区别,网上的答案很多,其实很简单:
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
举个栗子:
- 1
- 1
栗子中,a元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,a元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。
现在再说说我们之前那个栗子,也就是checkbox的问题。
- 1
- 2
- 1
- 2
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
而如果使用attr:
- 1
- 2
- 1
- 2
而如果使用prop,则正常:
- 1
- 2
- 1
- 2
所以归根到底就是attr和prop的区别。
- checkbox设置checked--true-但不勾选(使用$.attr('checked',true))无效
- checkbox已设置为checked--true-但不勾选问题解决方法(只第一次勾选有效)
- checkbox利用JQuer中 attr('checked', true)设置状态只有第一次有用
- jQuery 1.9 以后的 .attr(“checked”, true)
- input type="checkbox" checked值获取 (true/false)
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery checkbox重复调用attr('checked',true/false) 失效 只有第一次生效
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery 1.6以上 attr(“checked”)==true 不能使用的原因
- javascript_IE7 中CheckBox的checked=true不打勾解决方法
- 坑爹的radio 多次操作 赋值无效 得使用 prop("checked", true);
- jquery attr prop checkbox已有checked=checked但不显示勾选问题
- jquery attr prop checkbox已有checked=checked但不显示勾选问题
- jQuery checkbox attr checked不起作用
- Otter(阿里开源项目Otter介绍)
- ZCMU-1618-骨牌覆盖(矩阵乘法+快速幂)
- 详解μC/OS-II如何检测任务堆栈实际使用情况——即如何设置ucosii任务堆栈大小
- 多线程方式下写入系统日志
- HTTP解析
- checkbox设置checked--true-但不勾选(使用$.attr('checked',true))无效
- Java中IO体系字节流与字符流之适配器模式
- JavaScript调试技巧之console.log()详解
- shell基础
- linux下使用c++创建守护进程
- Android Studio突然不显示logcat日志的解决办法
- 程序员面试金典: 9.5位操作5.1两个整数的位合并
- android内存泄漏---常见内存泄露的问题
- 二叉树相关问题(JAVA实现)