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>