如果选中，则更改标签css类的复选框
我有隐藏的复选框。 我将图像作为复选框的标签，以便在单击图像时单击复选框。 我正在尝试使图像具有不同的不透明度，具体取决于该框是否被选中。 这是我的图像标签的CSS：
.checkbox-label{
opacity: .2;
}
.checkbox-label:hover{
opacity: .5;
}
.checkbox-label-after-click{
opacity: 1;
}
这是我的JavaScript来移动类
<script>
$('.checkbox-label').click(function(){
var the_input = $(this).next('input');
if(the_input.checked){
$(this).addClass( "checkbox-label-after-click" );
} else {
$(this).removeClass("checkbox-label-after-click");
}
});
</script>
基本上，当有人点击标签时，它应该抓住下一个输入，这是复选框，标签的类应该改变。 我也尝试过切换addClass和removeClass方法，这使得类开关在第一次点击时工作，但从来没有。
这里是html：
我如何得到这个工作？
你可以简单地使用toggleClass() 。 你的代码不工作，因为the_input是一个jQuery对象，它没有checked属性。 您可以使用.get()来获取底层的DOM元素。
喜欢
the_input.get(0).checked or the_input[0].checked
根据你的代码
$('.checkbox-label').click(function(){
$(this).toggleClass( "checkbox-label-after-click", the_input.get(0).checked ); //You can also use the_input.prop('checked')
});
我会用纯CSS做到这一点，就像这样：
label {
cursor: pointer;
}
/* Change cursor when the label is hovered */
input[type=checkbox] {
display: none;
}
/* Hide the ugly default radio styling */
label > span {
opacity: 0.2;
}
/* Hide the checkmark by default */
input[type=checkbox]:checked + span {
opacity: 1;
color: green;
}
/* Show the checkmark when the radio is checked */<label>
<input type="checkbox" name="obvious"><span>✓</span> I look good.</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> Cause we've been re-styled!</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> I've got a green checkmark if you click me.</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> We are a family of checkmarks!</label>我猜测它在检查它的时候会掉下来。 单击标签时，您将更好地切换课程
$('.checkbox-label').click(function(){
$(this).toggleClass( "checkbox-label-after-click" );
});
如果你真的想检查它的状态，你可以这样做：
$('.checkbox-label').click(function(){
var the_input = $(this).next('input');
if(the_input.prop('checked')){
$(this).addClass( "checkbox-label-after-click" );
} else {
$(this).removeClass("checkbox-label-after-click");
}
});
使用the_input.prop('checked')来查看输入是否被选中。 它返回一个布尔值。