Javascript 如果选中，则更改复选框的标签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>

$（'.checkbox标签'）。单击（函数（）{
var the_input=$（this.next（'input'）；
如果（检查输入）{
$（this）.addClass（“单击后的复选框标签”）；
}否则{
$（this.removeClass（“单击后的复选框标签”）；
}
});

基本上，当有人点击标签时，它应该抓取下一个输入，即复选框，标签的类应该改变。我还尝试过切换addClass和removeClass方法，这使得类切换在第一次单击时就可以工作，但之后就再也不能了

以下是html：

---

我怎么才能让它工作呢？

我猜在检查它的支票时它掉下来了。单击标签时切换类会更好

$('.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");
    }
});

---

使用

输入.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");
    }
});

使用

输入.prop（'checked'）

查看输入是否被选中。它返回一个布尔值。

您可以简单地使用。您的代码不是作为

工作的。\u input

是一个jQuery对象，并且它没有选中

属性。可以使用获取底层DOM元素

像

按照你的代码

$('.checkbox-label').click(function(){  
    $(this).toggleClass( "checkbox-label-after-click", the_input.get(0).checked ); //You can also use the_input.prop('checked')
});

你可以简单地使用。您的代码不是作为
工作的。\u input
是一个jQuery对象，并且它没有选中
属性。可以使用获取底层DOM元素

像

按照你的代码

$('.checkbox-label').click(function(){  
    $(this).toggleClass( "checkbox-label-after-click", the_input.get(0).checked ); //You can also use the_input.prop('checked')
});

由于
_输入
是一个jquery对象，您不能使用javascript的checked属性，您可以使用
_输入[0]。checked
或use

替换此项：

if(the_input.checked){

为此：

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

由于
_输入
是一个jquery对象，您不能使用javascript的checked属性，您可以使用
_输入[0]。checked
或use

替换此项：

if(the_input.checked){

为此：

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

我会用纯CSS来做这件事，比如：

$('.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");
    }
});


标签{
光标：指针；
}
/*悬停标签时更改光标*/
输入[类型=复选框]{
显示：无；
}
/*隐藏丑陋的默认收音机样式*/
标签>跨度{
不透明度：0.2；
}
/*默认情况下隐藏复选标记*/
输入[类型=复选框]：选中+范围{
不透明度：1；
颜色：绿色；
}
/*选中收音机时显示复选标记*/

✓ 我看起来不错。


✓ 因为我们已经改头换面了！


✓ 如果你点击我，我有一个绿色的复选标记。


✓ 我们是一家人的对勾我会使用纯CSS来实现这一点，如下所示：

$('.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");
    }
});


标签{
光标：指针；
}
/*悬停标签时更改光标*/
输入[类型=复选框]{
显示：无；
}
/*隐藏丑陋的默认收音机样式*/
标签>跨度{
不透明度：0.2；
}
/*默认情况下隐藏复选标记*/
输入[类型=复选框]：选中+范围{
不透明度：1；
颜色：绿色；
}
/*选中收音机时显示复选标记*/

✓ 我看起来不错。


✓ 因为我们已经改头换面了！


✓ 如果你点击我，我有一个绿色的复选标记。


✓ 我们是一家人的对勾显示你的HTML。你可以使用toggleClass吗？我可以使用toggleClass，理论上它也会有同样的效果，但是这个类并不取决于是否检查输入，而是取决于单击标签的时间。这有点冒险。显示你的HTML。你可以使用toggleClass吗？我可以使用toggleClass，理论上它也会有同样的效果，但是这个类并不取决于是否检查输入，而是取决于单击标签的时间。风险更大一点。