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

尝试使用：

$(':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');
});

Answer 3

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

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

检查最近的无线电时更改DIV背景

3 个答案: