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

change label css class for checkbox if checked

本文关键字：复选框 标签 css 如果      更新时间：2023-09-26

我有隐藏的复选框。我有图像作为复选框的标签，这样当单击图像时，复选框就会被单击。我正在尝试使其具有不同的不透明性，这取决于是否选中该框。这是我的图片标签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:

我该如何让它发挥作用？

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

您可以简单地使用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')
});

我猜它在检查检查时会掉下来。当你点击标签时，你最好只是切换类

$('.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')查看输入是否已检查。它返回一个布尔值。

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

替换此：

if(the_input.checked){

有了这个：

if(the_input.prop('checked')){
相关文章：