jquery checkbox没法二次选中的解法

需求：

使用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方法的使用时机。

 

• 对于HTML元素自己就带有的固有属性，在处理时，使用prop方法。

• 对于HTML元素咱们本身自定义的DOM属性，在处理时，使用attr方法。