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方法。