【Web前端问题】默认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");
});

回答：

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

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

回答：

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

回答：

试过修改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');
    });

回答：

试试：

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

回答：

selector:checked才是checked 的正确用法

以上是 【Web前端问题】默认radio按钮更换div border颜色 的全部内容， 来源链接： utcz.com/a/137741.html

回到顶部