如何使用 checkBox 检查更改 textcolor答案

【问题标题】：how use checkBox is Checked change textcolor如何使用 checkBox 检查更改 textcolor
【发布时间】：2014-07-21 17:06:35
【问题描述】：

我希望 Inputype 是 Checked 。文本颜色为 RED。

 <div class="checkbox"><label><input type="checkbox"> Sedan <span>(10)</span></label></div>
 <div class="checkbox"><label><input type="checkbox"> Sedan <span>(10)</span></label></div>

DEMO

【问题讨论】：

I wanted pureCss not use Jquery and javascript. 那你为什么用jquery标记这个问题..？ :0
jsfiddle.net/6Qa39/11

标签： jquery css

【解决方案1】：

像这样改变你的 html :-

<div class="checkbox"><input type="checkbox"/> <label>Sedan <span>(10)</span></label></div>

然后在css中：-

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

Demo

【讨论】：

嘿朋友们。你的回答很好，但复选框在我想要的标签内。
拜托了！你看到我的小提琴了。
@theinlwin 嗨，你不能通过 css 来实现，你必须更改 html 或者你可以使用 jquery instread。

【解决方案2】：

试试下面的代码

但这适用于 IE9 + 浏览器

<div class="checkbox">
<input type="checkbox"> 
<label>Sedan <span>(10)</span></label>
</div>

在css中

input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}

【讨论】：

嘿朋友们。我想在标签内

【解决方案3】：

这是一个有效的fiddle。

我所做的：修复了你的 css 选择器和 html 标签标签。

把html改成

<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>
<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>
<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>
<div class="checkbox">
    <input type="checkbox">
    <label> Sedan <span>(10)</span></label>
</div>

和css到

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

【讨论】：