CODEWITHSUNDEEP
javascriptjquery
Homer_J
Homer_J

Reputation: 3323

Color cell where radio button is located and selected but not on click

I am trying to color a table cell during the $(document).ready(function(){ load process by checking if a hidden radio button is selected. If it is, I need the table cell to highlight.

I have the following code:

if($('#q1c').is(':checked')) { 
    $(this).effect("highlight", {color: 'green'}, 1000);
    $(this).addClass("selected");
}

But this does not work as it doesn't refer to the table cell that the radio button resides in, it's using this which is incorrect.

The code below works as it's based on an on click event:

$('#rq1').on('click', 'td', function() {
   $(this).find('input:radio').prop('checked', true);
   $('.q1').removeClass("selected");
   $(this).effect("highlight", {color: 'green'}, 1000);
   $(this).addClass("selected");
});

I'm trying to achieve the same thing but to highlight the cell when the page loads and the radio button is pre-selected.

JS Fiddle:

Using feedback from below, have tried implemting the following but no joy.

https://jsfiddle.net/hryxge5n/1/

I'm wondering if closest is correct - I'm struggling to get my head around whether the radio button and table cell have a relationship that would allow closest to work?

Upvotes: 0

Views: 61

Answers (1)

Stepashka
Stepashka

Reputation: 2698

The problem is that you apply effect to checkbox, while you should apply it to table cell. Try doing it this way. You find checkbox and then apply effect to the TD in which checkbox is located.

if($('#q1c').is(':checked')) { 
    $(this).closest('td').effect("highlight", {color: 'green'}, 1000);
    $(this).closest('td').addClass("selected");
}

Edit:

this can't be used here as it refers to the window and there is no closest. Changed for the id of which you need the closest element.

if ($('#q1c').prop('checked')) {
    $('#q1c').closest('td').effect("highlight", {color: 'green'}, 1000);
    $('#q1c').closest('td').addClass("selected");
}

Upvotes: 2

Related Questions