I have checkboxes that are hidden. I have images as the labels for the checkboxes, so that when the images are clicked the checkboxes are clicked. I am trying to make it so that the image has different opacities depending on whether the box is checked or not. Here is my css for the image label:

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

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

Here is my javascript to move the classes

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

Basically, when someone clicks on the label, it should grab the next input, which is the checkbox, the label's classes should change. I've also tried switching the addClass and removeClass methods, which makes the class switch work on the first click, but never after.

Here is the html:

How do I get this to work?

I have checkboxes that are hidden. I have images as the labels for the checkboxes, so that when the images are clicked the checkboxes are clicked. I am trying to make it so that the image has different opacities depending on whether the box is checked or not. Here is my css for the image label:

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

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

Here is my javascript to move the classes

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

Basically, when someone clicks on the label, it should grab the next input, which is the checkbox, the label's classes should change. I've also tried switching the addClass and removeClass methods, which makes the class switch work on the first click, but never after.

Here is the html:

How do I get this to work?

• javascript
• jquery
• css
• checkbox
• this

Share Improve this question Follow asked Feb 7, 2015 at 17:15 Philip7899Philip7899 4,68744 gold badges6060 silver badges122122 bronze badges 3

• 1 Show your HTML. and you don't need duplicate your question. – Satpal Commented Feb 7, 2015 at 17:18
• can you use toggleClass?? – ARWVISIONS Commented Feb 7, 2015 at 17:19
• I could use toggleClass, and in theory it would have the same effect, but then the class would not be dependent on whether the input is checked but rather when the label is clicked. It's a little bit riskier. – Philip7899 Commented Feb 7, 2015 at 17:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I would do this with pure CSS, like this:

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>

You can simply use toggleClass(). Your code is not working as the_input is a jQuery object and it doesn't have checked property. You can use .get() to get underlying DOM element.

like

the_input.get(0).checked or the_input[0].checked

As per your code

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

Im guessing its falling down when checking its checked. You will be better off just toggling the class when you click the label

$('.checkbox-label').click(function(){  
    $(this).toggleClass( "checkbox-label-after-click" );
});

If you really want to check its state, you could do something like this:

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

Use the_input.prop('checked') to see if the input is checked or not. It returns a boolean.

As the_input is a jquery object you cannot use checked property of javascript, you may use the_input[0].checked or use prop method.

Replace this:

if(the_input.checked){

With this:

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