CODEWITHSUNDEEP
jquery
Dev
Dev

Reputation: 146

Changing class attributes when radio button checked

I have this code snippet

<td width="143"><b>Monday</b></td>
<td width="68" class="open select_open">
  <span class="jqTransformRadioWrapper">
    <a href="#" class="jqTransformRadio" rel="radio_m"></a>
    <input type="radio" name="radio_m" checked="checked" class="jqTransformHidden">
  </span>
</td>

The radio button has no value. However, I should be able to change the value of the class attribute of the <a> tag and the <td> tag above the radio button when it's checked.

Could someone help me with this please?

Upvotes: 0

Views: 787

Answers (3)

gen_Eric
gen_Eric

Reputation: 227270

$('input[name="radio_m"]').change(function(){
    var $this = $(this), $td = $this.closest('td');
    if(this.checked){
      $td.find('a.jqTransformRadio').addClass('addClass')
      $td.removeClass('removeClass');
    }
    else{
      $td.find('a.jqTransformRadio').removeClass('addClass')
      $td.addClass('removeClass');
    }
});

You can try something like this. $this.closest('td'); will get you the <td> that you want, and from there you can find the <a> tag. Use addClass and removeClass (or even toggleClass) to change the classes on elements.

Upvotes: 0

Charlie Brown
Charlie Brown

Reputation: 144

$("input[name='radio_m']").change(function(){
    if ($("input[name='radio_m']:checked").val() == '1') {
        $(".jqTransformRadio").attr('href', '[Your Value]');
        $(".select_open").attr('width','[Your Width');
    }
}

This should do it.

Upvotes: 0

Samich
Samich

Reputation: 30135

You can walk trought you elements structure. prev() function returns the previous element before radiobutton, closest('td') returns the closest TD element which is your TD.

$('input[name=radio_m]').change(function() {
   var $this = $(this);
   $this.prev().addClass('...'); // adding class to link above
   $this.prev().removeClass('...'); // removing class to link above

   $this.closest('td').addClass('...'); // adding class to table cell
   $this.closest('td').removeClass('...'); // removing class to table cell
});

Upvotes: 1

Related Questions