对选中的单选按钮的父按钮应用样式

So I have a series of radio buttons inside <li> elements. I'm trying to create a border on said <li> only when its child radio button is checked.

所以我在

元素中有一系列单选按钮。我尝试在said

元素中有一系列单选按钮。我尝试在说

的子单选按钮被选中时创建一个边框。

的子单选按钮被选中时创建一个边框。

I have a halfway solution here in jQuery:

我在jQuery中有一个折中方案:

$('input[type="radio"]').change(function() {
    if($(this).is(':checked')) 
    { 
        $(this).parent().css('border', '1px solid black');
    } 
    else 
    {
        $(this).parent().css('border', 'none');
    }
});

However, this only will add the style, but will not remove it when a different option in the radio buttons is selected. So, if you click all of the options, they all end up having the style applied.

但是，这只会添加样式，但是在选择单选按钮时不会删除它。所以，如果你点击所有选项，它们最终都会应用样式。

What can I do here?

我在这里能做什么?

1 个解决方案

#1

You'll have to remove the style on the other LI elements whenever a radio button is changed

当一个单选按钮被改变时，你必须删除其他LI元素上的样式。

var lis = $('input[type="radio"]').change(function() {
    lis.css('border', 'none');

    if ($(this).is(':checked') ) { 
        $(this).parent().css('border', '1px solid black');
    } 
}).parent(); // gets all the parents

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li><input type="radio" name="group"></li>
    <li><input type="radio" name="group"></li>
    <li><input type="radio" name="group"></li>
</ul>