javascript - 默认radio按钮更换div border颜色

问题描述

问 题

多个radio 按钮选择了其中一个， div border边框会变成红色。如何改成一开始如果有其中一个按钮是checked，默认边框就变成红色？如截图下面

HTML

  
<label style="width:100%"><div class="discount"><input type="radio" name="abc" checked>2件999</label></div>
<label style="width:100%"><div class="discount"><input type="radio" name="abc" checked>2件999</label></div>    

css

.discount{
    border: 2px solid #cccccc;
    padding:2px;
    width:100%;
}

.discount.checked {
    border-color: red;
}

jquery

<script>
$(":radio").on("change", e => {
    const $div = $(e.target).closest(".discount");
    console.log($div);
    $(".discount").removeClass("checked");
    $div.addClass("checked");
});
</script>    

解决方案

之前你的那个问题解决了点击变色的问题：https://segmentfault.com/q/10...

如果要一开始就设置样式，延用回答那个问题的思路，还是加 checked 类，可以在一开始就这样

$(":radio:checked").closest(".discount").addClass("checked");

或者把这段代码加在 readdy 事件中

$(function() {
    $(":radio:checked").closest(".discount").addClass("checked");
});

这篇关于javascript - 默认radio按钮更换div border颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！