jquery checkbox无法二次选中的解法

最新推荐文章于 2021-06-10 10:47:56 发布

chouchilei5210

最新推荐文章于 2021-06-10 10:47:56 发布

阅读量144

点赞数

原文链接：https://my.oschina.net/u/2487410/blog/755698

版权

需求：

使用jquery控制checkbox选中/不选中。

思路：

checkbox是否选中主要是看checked属性：选中/checked=“checked”，不选中/checked=“” 或清楚checked属性

一般做法：

工具：jQuery的attr方法。这样的做法，就是如标题所说的，除第一次可以选中外，以后的每次都是无效的。

代码实现：

HTML

<input type=“checkbox”>

<button class=“checked">选中</button>

<button class=“unchecked">不选中</button>

JS（使用attr方法）

<script type="text/javascript">

    $(".checked").click(function(){

        $("input").attr("checked", true);

        // 或者

        // $("input").attr("checked", "checked");   

    });



    $(".unchecked").click(function(){

        $("input").attr("checked", false);

        // 或者

        // $("input").attr("checked", '');

        // 或者

        // $("input").removeAttr("checked");



    });

</script>

使用attr方法其实是有改变checked属性的值的，不信可以F12打开浏览器的开发者工具，对着checkbox使用“审查元素”观察，可以看到checked属性的改变，然而就是没有效果。

解决方法：

使用jquery的prop方法。使用prop方法替换条attr方法即可。

<script type="text/javascript">

    $(".checked").click(function(){

        $("input").prop("checked", true);   

    });



    $(".unchecked").click(function(){

        $("input").prop("checked", false);

    });

</script>

这里简单说一下prop和attr方法的使用时机。