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

Question

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

HTML

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

css

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

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

jquery

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

Answer 1

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

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

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

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

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

Answer 2

虽然我一般用css做实现，但这里，在题主的js基础上做个实现

$(":radio").on("change", (e) => {
  switchRadio($(e.target));
});

$(":radio:checked").each(function(i, ele) {
  switchRadio($(ele));
});

function switchRadio(ele) {
  const $p = ele.closest(".discount");
  console.log($p);
  $(".discount").removeClass("checked");
  $p.addClass("checked");
}

Answer 3

http://www.css88.com/book/css...

Answer 4

试过修改input、select默认的样式，没试过处理radio...一般都是另外处理,用active类来区分,做单选方法
原来如此....
建议不要用radio来处理了...默认样式不好调整
找你们ui要2个Icon，类似下面的效果。

.usbLi.active{
    background-color: #d5d5d5;
}
.usbLi .usbLiLeft .selectIcon {
    position: absolute;
    top:5px;
    left: 5px;
    width: 30px;
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../image/select.png);
}
.usbLi.active .usbLiLeft .selectIcon {
    background-image: url(../image/select-active.png);

}

然后js处理一下单选方法。以jQ举例

$('.usb_ul .usbLi').on('click', function () {
        var self = $(this);
        self.addClass('active').siblings().removeClass('active');
    });

这里没有考虑动态数据插入。如果考虑动态插入数据的话改个写法

$('body').on('click','.usb_ul .usbLi', function () {
        var self = $(this);
        self.addClass('active').siblings().removeClass('active');
    });

Answer 5

试试：

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

Answer 6

selector:checked才是checked 的正确用法