Add css class to parent of radio button when checked using jquery

Question

I'm trying to add a css class to the div.from of my radio button if it is checked. Then remove if it is not checked.

And the html:

<div style="width:49.5%;height:auto;float:left;" class="from">


<label>
<div class="fromm" id="order">
    <div class="frairimg"></div>
    <div class="frfromdetails"></div>
    <div class="frarrow"></div>
    <div class="frfromdetails"></div>
    <div class="frrefund"></div>
    <div class="radio"><input type="radio" name="from" id="something" class="getvalue"></div>
    <div class="frfnumber"></div>
    <div class="roundfare"></div>
</div>
</label>

<label>
<div class="fromm" id="order1">
    <div class="frairimg"></div>
    <div class="frfromdetails"></div>
    <div class="frarrow"></div>
    <div class="frfromdetails"></div>
    <div class="frrefund"></div>
    <div class="radio"><input type="radio" name="from" id="something1" class="getvalue"></div>
    <div class="frfnumber"></div>
    <div class="roundfare"></div>
</div>
</label>

  <label>
<div class="fromm" id="order2">
    <div class="frairimg"></div>
    <div class="frfromdetails"></div>
    <div class="frarrow"></div>
    <div class="frfromdetails"></div>
    <div class="frrefund"></div>
    <div class="radio"><input type="radio" name="from" id="something2" class="getvalue"></div>
    <div class="frfnumber"></div>
    <div class="roundfare"></div>
</div>
</label>                                  

</div>

CSS

<style>
.checked11 { background: red; }
</style>

Here's what I came up with in jquery:

<script>
$(document).ready(function() {
  $('input:radio').click(function() {
    $('input:radio[name='+$(this).attr('name')+']').parent().removeClass('checked11');
        $(this).parent().addClass('checked11');

    });
});

</script> 

here my problem is the class is applying for radio button only but want it to apply for div.from

Thankyou. Naresh Kamireddy

Answer 1

If I understand correctly, there are 2 requirements to this question.

Upon selecting a radio button:

1. The CSS class checked11 should be added to the parent of the selected radio button.
2. The CSS class checked11 should be removed from any parents of now no longer selected radio buttons.

If this is the case, then the following should work:

var $radioButtons = $('input[type="radio"]');
$radioButtons.click(function() {
    $radioButtons.each(function() {
        $(this).parent().toggleClass('checked11', this.checked);
    });
});

jsFiddle demonstration

Answer 2

Here's the FIDDLE

  $('input:radio').click(function () {
      $('input:radio').parent().removeClass('checked11');
      $(this).parent(this).addClass('checked11');
  });

Answer 3

Finally i got my answer....

$(document).ready(function() {
    var $radioButtons = $('input[type="radio"]');
$radioButtons.click(function() {
    $radioButtons.each(function() {
        $(this).closest('.fromm').toggleClass('checked11', this.checked);
    });
});
});

Thank you for all spending your valuable time for my question....

Answer 4

编辑：

 $(this).closest('.fromm').addClass('checked11');

Answer 5

This should work:

$(document).ready(function(){
   $('input:radio').change(function(){
      var $self = $(this);
      if ($self.prop('checked')) {
         $self.parent().addClass('checked11');
      } else {
         $self.parent().removeClass('checked11');
      }
   });
});

[Edit] http://jsfiddle.net/jtpU6/1/

$(document).ready(function(){
   $('input:radio').change(function(){
      $('div:has(input:radio)').removeClass('checked11');
      var $self = $(this);
      if ($self.prop('checked')) {
         $self.parent().addClass('checked11');
      }
   });
});

Answer 6

You also have a little weird selector of the input.

$(this) is the clicked element, you dont need to search for input radios which name matches the clicked input's name, just use $(this) - and $(this).parent() to select the clicked parent:

$(document).ready(function() {
  $('input:radio').click(function() {
    $(this).parent().removeClass('checked11').addClass('checked11');
    });
});