夏日博客

A-A+

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

2016年01月07日 前端设计 暂无评论 阅读 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>  
标签：

给我留言