选中最近的收音机时更改 DIV 背景

Question

我已经有了这个，以便更轻松地选择单选框

$("div.column43").click(function () {
$(this).find('input:radio').attr('checked', true);
});

我希望 div 的背景/边框在选择其中的收音机时发生变化。

我可以在悬停时更改边框没问题，但我希望它保持更改直到它被取消选择。

这是页面上的格式

<div class="row43">
                <div class="column43">
                    <input id="box21" type="radio" name="box21" 
value="" checked> <label for="box21">Any/All</label>    
                </div>
                <div class="column43">
                    <label for="box22">1.0</label><input 
id="box22" type="radio" name="box21" value="1.0">
                </div>
                <div class="column43">
                    <label for="box23">1.1</label><input 
id="box23" type="radio" name="box21" value="1.1">   
                </div></div>

这是悬停效果的CSS

div.row43:hover > div {
opacity: 0.5;
}
div.row43:hover > div.column43:hover {
opacity: 1.0;
}
div.row43:hover {
border-color: #0099ff;
}
div.column43:hover {
opacity: 0.5;
border-color: #0099ff;
}

在我的一生中，我不知道如何在选择收音机并移开鼠标时保持边框效果。

如果有人可以让我知道我需要使用实际课程做什么，那就太棒了

谢谢

Answer 1

如果您可以将标签放在单选按钮之后，则可以完全使用 CSS：

input[type="radio"]:checked+label {
    background:#faa;
    border:1px solid red;
}

jsFiddle example

如果没有，使用 jQuery 你可以这样做：

$("div.column43").click(function () {
    $(this).parent('div.row43').find('label').removeClass('highlight');
    $(this).find('input:radio').attr('checked', true);
    $(this).find('label').addClass('highlight');
});

jsFiddle example

Answer 2

您需要为单选按钮创建一个事件，然后设置父级的背景颜色。

$('div.column43').find('input[type=radio]').change(function() {
  if ($(this).prop('checked')) {
    $(this).parent().css('background-color', 'red'));
  }
});

Answer 3

试试这个：

$(':radio:checked').closest('div').addClass('selected');

或与.css()一起使用：

$(':radio:checked').closest('div').css({
                                        'border':'solid 1px red', 
                                        'background': '#e2e2e2'
                                       });

最后应该是这样的：checkout fiddle

$(':radio').change(function () {
    $(this).parent().removeClass('selected');
    $(':radio:checked').closest('div').addClass('selected');
});