jquery checkbox 反复 选不中

张映 发表于 2014-10-28

分类目录: nodejs/vue/js/jquery

标签:, , , ,

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

1,问题重现

<html>
<body>
    <input type="checkbox" name="items" value="test" id='test' />test

    <button class='selected'>选中</button>
    <button class='unselected'>不选中</button>
</body>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('.selected').click(function(){
        $('#test').attr('checked','checked');
    });
    $('.unselected').click(function(){
        $('#test').removeAttr('checked');
    });
});
</script>
</html>

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

2,解决办法

<script type="text/javascript">
$(function(){
    $('.selected').click(function(){
        $('#test').prop('checked',true);
    });
    $('.unselected').click(function(){
        $('#test').prop('checked',false);
    });
});
</script>


转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1655.html