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>

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

1 个答案: