更改标签和 Div 周围输入的颜色 + 点击时的标签答案

【问题标题】：Change Color of Label and Div Around Input + Label on Click更改标签和 Div 周围输入的颜色 + 点击时的标签
【发布时间】：2014-08-12 13:35:09
【问题描述】：

提前感谢您！ 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>

非常感谢任何帮助！

【问题讨论】：

js 还是借助 jquery??
没关系，只要有效！此外，刚刚编辑以注意标签也在带有复选框的 div 内。谢谢！
你想要它在 CSS 中吗？它is possible
如果可能的话，当然！谢谢！

标签： javascript css checkbox

【解决方案1】：

使用 jQuery，

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

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

工作小提琴here.

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

【讨论】：

这太棒了，正是我需要的！唯一的问题是我无法让标签文本改变颜色......不知道为什么？谢谢！！

【解决方案2】：

仅使用 CSS 即可：

复选框需要直接位于您要设置样式的第一件事之前。在您的示例中，它需要在div.label 前面。对于页面中的多个 div，请确保更改每个 for 和对应的 id。

input:checked + div 将仅针对已检查的输入后的 div。

Have a jsBin example!（现在打勾）

Here is the same example with multiple checkboxes and divs

HTML

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

CSS

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

input:checked + div {
    border: solid 1px #000;
    color: #F00;
}

input:checked + div:before {
    content: "\2713";
    padding: 20px;
}

【讨论】：

这太棒了，看起来它可以满足我的需要......但是，我现在设置样式的自定义复选框根本没有出现，只有文本/边框颜色发生了变化。有什么方法可以在 div 中保留我的自定义复选框？
在这里为我的无知道歉！我不确定复选框是否是图像 - 就是这个（我在网上找到的）：内容：“\2713”；

【解决方案3】：

我会做类似的事情

$('.label').click(function(){debugger;
$(this).toggleClass("checked")


});

添加一个选中的 CSS 类

.checked {
   border:1px solid black;
   color:red;
}

它会做你想做的事，在选中/取消选中复选框或单击标签时更改边框/文本。

Fiddle here

【讨论】：