jQuery jquery中checkbox反复没反应问题解决办法

[复制链接]
冷蝶 2015-4-19 [jQuery] 显示全部楼层 |阅读模式 上一主题 下一主题
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
checkbox由于特殊性所以我们要选中与反选都与其它的有一点区别,下文整理了一个jquery中checkbox反复没反应问题解决办法,大家一起来看看。

jquery1.9以后,checkbox的选中用attr就有问题,第一次能选中,第二次选不中,要换成prop来设置属性。

1、jquery中checkbox反复没反应问题重现
  1. <html>
  2. <body>
  3.     <input type="checkbox" name="items" value="test" id='test' />test
  4.     <button class='selected'>选中</button>
  5.     <button class='unselected'>不选中</button>
  6. </body>
  7. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10.     $('.selected').click(function(){
  11.         $('#test').attr('checked','checked');
  12.     });
  13.     $('.unselected').click(function(){
  14.         $('#test').removeAttr('checked');
  15.     });
  16. });
  17. </script>
  18. </html>
复制代码

在这里有一点要注意,第一次选中后,用开发者工具,可以看到,checkbox有checked='checked'属性,第二次,点了,但是选不中,还是有checked='checked'

2、jquery中checkbox反复没反应问题解决办法
  1. <script type="text/javascript">
  2. $(function(){
  3.     $('.selected').click(function(){
  4.         $('#test').prop('checked',true);
  5.     });
  6.     $('.unselected').click(function(){
  7.         $('#test').prop('checked',false);
  8.     });
  9. });
  10. </script>
复制代码



上一篇:jquery在html,text,val的区别对比
下一篇:js/jquery快速获得图片真实的宽度和高度

大神点评5

洛阳app开发 2015-4-19 [jQuery] 显示全部楼层
支持学习
洛阳app代写 2015-4-19 [jQuery] 显示全部楼层
支持学习
洛阳app代写 2015-4-19 [jQuery] 显示全部楼层
支持学习
洛阳app技术 2015-4-19 [jQuery] 显示全部楼层
支持学习
lvguiqun 2015-4-19 [jQuery] 显示全部楼层
都可以来学习交流
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表