如果选中，更改复选框的标签 css class

Question

我有隐藏的复选框。我有图像作为复选框的标签，因此当单击图像时，复选框也会被单击。我正在尝试使图像具有不同的不透明度，具体取决于是否选中该框。这是我的 css 图片标签：

.checkbox-label{
    opacity: .2;
}
.checkbox-label:hover{
    opacity: .5;
}

.checkbox-label-after-click{
    opacity: 1;
}

这是我要移动 classes

的 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>

基本上，当有人点击标签时，它应该抓取下一个输入，即复选框，标签的 classes 应该改变。我还尝试切换 addClass 和 removeClass 方法，这使得 class 开关在第一次点击时起作用，但之后就没有了。

这里是 html:

如何让它工作？

Answer 1

我猜它是在检查它的时候掉下来的。当您单击标签

时，您最好只切换 class

$('.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')查看输入是否被选中。它 returns 一个布尔值。

Answer 2

您可以简单地使用 toggleClass(). Your code is not working as the_input is a jQuery object and it doesn't have checked property. You can use .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')
});

Answer 3

由于 the_input 是一个 jquery 对象，您不能使用 javascript 的已检查属性，您可以使用 the_input[0].checked 或使用 prop method .

替换为：

if(the_input.checked){

有了这个：

if(the_input.prop('checked')){

Answer 4

我会用纯 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>

如果选中，更改复选框的标签 css class

change label css class for checkbox if checked

javascript

css

checkbox

jquery

this