jquery - 选中最近的收音机时更改 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 示例

If not, using jQuery you can do it like this:

$("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

试试这个：

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

或使用.css()：

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

最后应该是这样的：结帐小提琴

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

Answer 3

You need to create an event for the radio buttons and then set the background-color of the parent.

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