CSS 通过点击javascript/jquery 更换div border 颜色?

Question

我想通过选择 radio 按钮更换对应的div border颜色为红色。 有没有高手指点一下？

HTML

<label ><div class="discount"><input type="radio" name="abc">2件999</div></label>
<label ><div class="discount"><input type="radio" name="abc">2件999</div></label>    

CSS

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

如截图

Answer 1

https://jsfiddle.net/rtf6w78b/

需要 jQuery，es6 语法

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

Answer 2

css中：
.checktopup{
border: 1px solid #f00;
}
js中，记得引入jquery
$("input").on("click", function() {

    $(".discount").addClass("checktopup").siblings().removeClass("checktopup");
    window.checktopup=this;
    checked = true

})

Answer 3

当选项的checked值为true的时候,添加class