当单选按钮被选中时，如何向父控件添加样式

How to add style to the parent when radio button is selected

本文关键字：控件 样式 添加 单选按钮      更新时间：2023-09-26

嗨，我有两个单选按钮，希望当单选按钮被选中时，父框(<div>)有这些CSS样式:

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

这是我的单选按钮与div:

<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的其他功能关于这些按钮，但我不知道如何添加边框和框阴影正确只有当单选按钮被选中

您可以在类中添加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');
});
演示工作

。

为了在加载页面后应用此效果，您可以将类名添加到相应的div父元素中: 
<div class="delivery_option alternate_item checked">
    <input type="radio" checked="checked">
</div>

或者通过JavaScript/jQuery动态地做同样的事情:

$('input:radio').filter(':checked').parent().addClass('checked');
<<p> 更新演示/strong>。
相关文章：