05、radio 使用 attr() 添加 checked 第二次點擊全選單選項失效

問題描述：

radio 使用 attr() 添加 checked 第二次點擊全選。其它單選項並不能全部選中。第一次，點擊則可以全部選中。

 

代碼：

<!-- 單選 -->
<div class="payment">
     <input type="radio" class="radio-la radio-cart" id="check-0" rg-s="0" index="0">
     <label for="check-0"></label>
</div>
<div class="payment">
     <input type="radio" class="radio-la radio-cart" id="check-1" rg-s="0" index="0">
     <label for="check-1"></label>
</div>
<!-- 多選 -->
<div class="payment" style="width: 5%;">
    <input type="radio" class="radio-la radio-all" id="check-all" rg-s="0">
    <label for="check-all" style="text-indent:0rem;">全選</label>
</div>

<script type="text/javascript">
// 單選擇
$('.radio-cart').click(function(){
    var this_ = $(this);
    var status = this_.attr('rg-s');    
    if(status == '1'){
        this_.attr('rg-s','0');
        this_.removeAttr('checked');
        cartTotalPirce();
    }else{      
        this_.attr('rg-s','1');  
        this_.attr('checked','checked');
        cartTotalPirce();
    }
});

// 全選
$('.radio-all').click(function(){
    var this_ = $(this);
    var status = this_.attr('rg-s');    
    if(status == '1'){
        $('.radio-la').each(function(){
            $(this).attr('rg-s','0');  
            $(this).removeAttr('checked');
        })
        cartTotalPirce();
    }else{      
        $('.radio-la').each(function(){
            $(this).attr('rg-s','1'); 
            $(this).attr('checked','checked');
        })
        cartTotalPirce();
    }
});
</script>

 

原因：

懷疑是使用 attr 設置 checked 原因。改成 this_.prop('checked', true); 就沒有問題了。那麼，attr()和prop()有什麼區別呢？

attr 與prop從中文意思看，兩者分別是獲取/設置 attributes 和 properties 的方法。

那麼，什麼時候使用attr()，什麼時候使用prop()？

官方的建議：具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。

對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

 

解決方案：

把 attr() 改成 prop()即可。

<script type="text/javascript">
// 單選擇
$('.radio-cart').click(function(){
    var this_ = $(this);
    var status = this_.attr('rg-s');    
    if(status == '1'){
        this_.attr('rg-s','0');
        this_.prop('checked', false);
        cartTotalPirce();
    }else{      
        this_.attr('rg-s','1');  
        this_.prop('checked', true);
        cartTotalPirce();
    }
});

// 全選
$('.radio-all').click(function(){
    var this_ = $(this);
    var status = this_.attr('rg-s');    
    if(status == '1'){
        $('.radio-la').each(function(){
            $(this).attr('rg-s','0');  
            $(this).prop('checked', false);
        })
        cartTotalPirce();
    }else{      
        $('.radio-la').each(function(){
            $(this).attr('rg-s','1'); 
            $(this).prop('checked', true);
        })
        cartTotalPirce();
    }
});
</script>

資料參考於：

https://www.cnblogs.com/lizi-cat/p/10811743.html

https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

 

代碼重構 把 type="radio" 修改 type="checkbox"：

<!-- 單選 -->
<div class="payment">
     <input type="checkbox" class="radio-la radio-cart" id="check-0" index="0">
     <label for="check-0"></label>
</div>
<div class="payment">
     <input type="checkbox" class="radio-la radio-cart" id="check-1" index="0">
     <label for="check-1"></label>
</div>
<!-- 多選 -->
<div class="payment" style="width: 5%;">
    <input type="checkbox" class="radio-la radio-all" id="check-all">
    <label for="check-all" style="text-indent:0rem;">全選</label>
</div>

<script type="text/javascript">
// 單選項
$('.radio-cart').click(function(){
    cartTotalPirce();
    if (!$(this).prop('checked')) {
        $('#check-all').prop('checked', false);
    }
});
// 全選
$('.radio-all').click(function(){
    if ($(this).prop('checked')) {
        $('.radio-la').prop('checked', true);
        cartTotalPirce();
    }else {
        $('.radio-la').prop('checked', false);
        cartTotalPirce();
    }
</script>