Selecting input check[ed]box and adding style to its parent

Question

I'm selecting a checkbox and adding style to its parent tag. It's working well. What I don't know is how to do the inverse way, when it is already checked and remove the style.

http://jsfiddle.net/FG7jV/

HTML

<table>
    <tbody>
        <tr>
            <td><input type="checkbox" name="" value="" /></td>
            <td><img src="http://lorempixel.com/60/60/" /></td>
                    <td>Boné NFL - San Diego Charges</td>
         </tr>
      </tbody>
 </table>

JQUERY

$("input:checkbox").click(function() {
$(this).parent().parent().css("background-color","yellow");
});
$("input:checked").click(function(){
alert();
});

im using alert, obviously, just to check if it's selecting when i click.

The Alpha · Accepted Answer · 2014-04-22 23:16:49Z

1

You may try this (Use change event):

$("input:checkbox").change(function() {
    if($(this).is(':checked')) {
        $(this).parent().parent().css("background-color","yellow");
    }
    else {
        $(this).parent().parent().css("background-color","");
    }
});

answered Apr 22, 2014 at 23:16

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liftoff · Accepted Answer · 2014-04-22 23:20:25Z

1

You can use .prop() to check if the checkbox is checked onclick:

$("input:checkbox").click(function() {
    if(!$(this).prop("checked"))
        alert();
    else
        $(this).parent().parent().css("background-color","yellow");
});

JSFiddle

answered Apr 22, 2014 at 23:20

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

Comments

user3383479 · Accepted Answer · 2014-04-22 23:29:39Z

1

You can use this:

$("input:checkbox").click(function() {
var isChecked = $(this).attr('checked')?true:false;
if(isChecked){
$(this).parent().parent().css("background-color","yellow");
}
else
     $(this).parent().parent().css("background-color","");
});

answered Apr 22, 2014 at 23:29

user3383479

Collectives™ on Stack Overflow

Selecting input check[ed]box and adding style to its parent

3 Answers 3

Comments

JSFiddle

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related