A-A+

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

2016年01月07日 web前端设计 暂无评论 阅读 6 views 次

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

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

1,问题重现,代码如下:

  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,解决办法,代码如下:

  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>  
标签:

给我留言