Question

我有隐藏的复选框。我将图像作为复选框的标签，以便在单击图像时单击复选框。我试图使图像具有不同的不透明度，具体取决于是否选中了框。这是我对图像标签的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：

如何让它发挥作用？

Answer 1

我会用纯CSS做这个，比如：

＆＃13;

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 */

＆＃13;

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

＆＃13;

Answer 2

您只需使用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')
});

Answer 3

我在检查它的检查时猜测它会掉下来。单击标签

时，最好只切换班级

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

Answer 4

由于the_input是jquery对象，因此您无法使用javascript的checked属性，您可以使用the_input[0].checked或使用prop method。

替换它：

if(the_input.checked){

有了这个：

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

如果选中，则复选标签css类以获取复选框

4 个答案: