javascript - 单击时更改输入 + 标签周围标签和 div 的颜色

Question

提前谢谢您! JavaScript 新手。

我需要开发位于 div 内的自定义复选框，当您单击标签或复选框时，div 的边框和字体颜色会发生变化。我以为我可以用 CSS 来做到这一点，但我开始认为我需要 JS。

这是我到目前为止的代码:

CSS:

input[type=checkbox] {
    display: none;
}

div.label {
    display:block;
    border: 1px solid gray;
    border-radius: 23px;
    line-height: 30px;
    height:50px;
    width: 225px;
    text-align:center;
}

label {
    color:gray;
    line-height:50px;
}

label:before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 10px;
    background-color: #ffffff;
}


input[type=checkbox]:checked + label:before {
    content: "\2713";
    font-size: 15px;
    color: red;
    line-height: 15px;
    margin-left:10px; 
    margin-top: 15px;
}

input[type=checkbox]:checked + label:after {
    color: red;
}

HTML:

<div class="label">
<input id="weekly" type="checkbox" name="lists[weekly]" value="True" />
<label for="weekly">Weekly Preview Email</label><br>
</div>

非常感谢任何帮助!!

Answer 1

使用 jQuery，

$(function(){
    $('input[type="checkbox"]').on('change', function(e){
        return $(this).parent().toggleClass('checked');
    });
});

这将向父 div 添加一个“checked”类。您可以为父级定义 CSS。

工作 fiddle here .

编辑:根据评论，在 CSS 中添加了样式来为标签着色。 Fiddle here .