Question

您好我有两个单选按钮，并且当选中（选中）单选框（<div>）时，想要这些CSS样式：

box-shadow: 0 0 5px #5cd053;
border-color: #28921f;

这是我的单选按钮：

<div class="delivery_option alternate_item">
    <input class="delivery_option_radio" type="radio" name="delivery_option[0]" onchange="mydisplayudpate();updateCarrierSelectionAndGift();" id="delivery_option_0_1" value="6," checked="checked">
</div>

<div class="delivery_option item">
    <input class="delivery_option_radio" type="radio" name="delivery_option[0]" onchange="mydisplayudpate();updateCarrierSelectionAndGift();" id="delivery_option_0_0" value="7,">
</div>

我将jQuery用于关于这些按钮的其他功能，但我不确定如何在选择单选按钮时正确添加边框和框阴影。

Answer 1

您可以在类中添加CSS声明，并将类添加/删除到单选按钮的父元素，如下所示：

.checked {
  box-shadow: 0 0 5px #5cd053;
  border-color: #28921f;
}

jQuery的：

var $radios = $('input:radio');

$radios.change(function () {
    $radios.parent().removeClass('checked');
    $(this).parent().addClass('checked');
});

<强> WORKING DEMO

为了在加载页面后应用效果，您可以将类名添加到对应的div父元素：

<div class="delivery_option alternate_item checked">
    <input type="radio" checked="checked">
</div>

或者通过JavaScript / jQuery动态执行相同操作：

$('input:radio').filter(':checked').parent().addClass('checked');

<强> UPDATED DEMO

选择单选按钮时如何向父级添加样式

1 个答案: