一个问题,今天用jquery-1.11.3.min.js时遇到的关于input复选框的问题。

类似于以下代码:

<ul class="demo">
    <li><label ><input type="checkbox"/>首页</label></li>
    <li><label ><input type="checkbox"/>关于</label></li>
    <li><label ><input type="checkbox"/>产品</label></li>
</ul>

需要实现,点击li,判断复选框是否选中,如果选中的话,取消选中,如果未选中,则选中,在1.11.3的版本中,使用

$('.demo').on('click', 'li label', function(ev){

  var isChecked = $(this).find('input').is(':checked');

  if(!isChecked){

    $(this).find('input').attr('checked', true);

  }else{

    $(this).find('input').attr('checked', false);

  }

  ev.preventDefault();

});

  在第一次未选中时,点击,可以选中,再次点击,取消选中,再次点击时,从开发者工具中显示,再次被选中,但是页面中复选框的对勾并未勾上,后改为1.8.3版本,完全可以实现。而且是在IE8上面也没问题,只有chrome和opera浏览器上(只测试了这两款浏览器),反复试验依然无法取得正确结果,也未能找到原因。

  后经qq群朋友解答,使用prop函数替代attr,完美实现需要的效果,但是依然不解attr导致的问题的根源在哪?

 

posted on 2016-08-15 21:46  烛火星光  阅读(2495)  评论(0编辑  收藏  举报