javascript - 将样式应用于选中的单选按钮的父级

Question

所以我里面有一系列的单选按钮<li>元素。我正在尝试在 <li> 上创建边框只有当它的子单选按钮被选中时。

我在 jQuery 中有一个中途解决方案:

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

但是，这只会添加样式，而不会在选择单选按钮中的不同选项时将其删除。因此，如果您单击所有选项，它们最终都会应用样式。

我可以在这里做什么？

Answer 1

每当更改单选按钮时，您必须删除其他 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>