CODEWITHSUNDEEP
javascriptjquerycsscheckboxthis
Philip7899
Philip7899

Reputation: 4677

change label css class for checkbox if checked

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?

Upvotes: 1

Views: 7038

Answers (4)

Ian Hazzard
Ian Hazzard

Reputation: 7771

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>

Upvotes: 5

Satpal
Satpal

Reputation: 133403

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')
});

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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')){

Upvotes: 0

haxtbh
haxtbh

Reputation: 3534

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.

Upvotes: 0

Related Questions