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

well, parent() does not need a parameter, just write $(this).parent() — Alex
– Alex, Commented May 28, 2013 at 10:05
Your sample is working. it is applying checked11 for the div that containing radio class. jsfiddle.net/fq8Zn — Chamika Sandamal
– Chamika Sandamal, Commented May 28, 2013 at 10:22
You should be clear about what you actually want. In your question you say you want to style the "parent div" but in the comments you say the "div with class .from" which doesn't make too much sense since all your radios are in this div. Don't you actually want to style each radio's closest div.fromm? — Seimen
– Seimen, Commented May 28, 2013 at 10:30

Richard · Accepted Answer · 2013-05-28 10:18:18Z

9

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

Upon selecting a radio button:

The CSS class checked11 should be added to the parent of the selected radio button.
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

answered May 28, 2013 at 10:18

Richard

8,2903 gold badges39 silver badges60 bronze badges

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

Comments

Vond Ritz · Accepted Answer · 2013-05-28 10:13:44Z

3

Here's the FIDDLE

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

answered May 28, 2013 at 10:13

Vond Ritz

2,01215 silver badges15 bronze badges

1 Comment

user2361114 Over a year ago

still the same problem is coming when i was implementing in my code, instead of applying for <div class="from">/div> it is applying for <div class="radio">/div>

user2361114 · Accepted Answer · 2013-05-28 13:15:54Z

1

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....

answered May 28, 2013 at 13:15

user2361114

1621 gold badge1 silver badge9 bronze badges

Comments

Alex · Accepted Answer · 2013-05-28 10:07:54Z

0

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

answered May 28, 2013 at 10:07

Alex

10.3k6 gold badges36 silver badges62 bronze badges

1 Comment

user2361114 Over a year ago

i made small changes to your code and it is working perfect, thank you

mkdevoogd · Accepted Answer · 2013-05-28 10:18:35Z

0

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

edited May 28, 2013 at 10:18

answered May 28, 2013 at 10:06

mkdevoogd

1361 silver badge4 bronze badges

1 Comment

Richard Over a year ago

Alternatively you could use toggleClass, like so: $self.parent().toggleClass('checked11', $self.prop('checked'));

Jude Duran · Accepted Answer · 2013-05-28 10:24:00Z

0

EDIT:

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

edited May 28, 2013 at 10:24

answered May 28, 2013 at 10:05

Jude Duran

2,2152 gold badges26 silver badges41 bronze badges

3 Comments

Jude Duran Over a year ago

how about using .closest()

user2361114 Over a year ago

if closest() means it applys for closest div, but i want it to apply for the div which class is 'from'

Jude Duran Over a year ago

if you want to add class on 'from', then change '.radio' to '.from'

Collectives™ on Stack Overflow

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

6 Answers 6

jsFiddle demonstration

Comments

1 Comment

Comments

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related