javascript - 在聚焦复选框时更改标签背景颜色

Question

我有一个复选框，它位于标签控件内。我需要在选中复选框时更改标签背景颜色。

是的

我看过Textbox的源码如下:

input:focus + label {background-color: red;}

我已经尝试了上面的带有复选框的代码，但是复选框不起作用。

input[type="checkbox"]:focus + label {background-color: red;}

请帮帮我

Fiddle Demo

Answer 1

由于输入是标签的子项，因此没有可以影响/选择它的 CSS 选择器。

然而，使用 Jquery，这是一件简单的事情。

$(document).ready(function () {
    $('input').focus(function () {
        $(this).parents('label').addClass('focused');
    });

    $('input').blur(function () {
        $(this).parents('label').removeClass('focused');
    });
});

label {
    float:left;
}
.focused {
    outline:none;
    box-shadow: 0 0 1px 2px rgba(0, 240, 255, 0.4);
    background-color : rgba(0, 240, 255, 0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="chkYesIsSubPropofferedSale">Check
    <input id="chkYesIsSubPropofferedSale" type="checkbox" />
</label>

注意:我的 JQ 技能不高，所以我相信这可以改进。