jQuery: Add class if list item has checked radio button inside

Question

I want to add an own class if a list item has an active radio button inside of it.

I tried this code to add a class but I guess there is an error in it:

$('input').change(function() {
  var check = $('.wc_payment_method').map(function(e) {
    return $(this).find('input[type="radio"]').is(':checked')
  }).get()

  $('.wc_payment_method').addClass('active');
})

.wc_payment_method {padding: 10rem;}
.active {background-color: #eee;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
  <li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
  </li>

  <li class="wc_payment_method payment_method_creditcard">
    <input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
    <label for="payment_method_creditcard">Credit card</label>
  </li>
</ul>

$('.input-radio:checked').each(function() { $(this).parent().addClass('active')}); — Tushar
– Tushar, Commented Apr 4, 2020 at 11:34
Please edit the question and add live code snippet by clicking on <> menu. — Tushar
– Tushar, Commented Apr 4, 2020 at 11:37
Yes. Also add the corresponding CSS class active in the snippet. — Tushar
– Tushar, Commented Apr 4, 2020 at 11:41

Roko C. Buljan · Accepted Answer · 2020-04-04 11:51:49Z

3

Loop your inputs using .each()
go for $(this).closest('selector') to target the closest selector
use .toggleClass('className', Boolean) to toggle the class.

const $inp = $('[name="payment_method"]');

$inp.on("change", function() {
  $inp.each(function() {
    $(this).closest('.wc_payment_method').toggleClass('active', this.checked);
  });
});

.active { background: gold; }

<ul>
  <li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
  </li>

  <li class="wc_payment_method payment_method_creditcard">
    <input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
    <label for="payment_method_creditcard">Credit card</label>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

or don't use JavaScript at all:

Use the :checked pseudo
Target the sibling Label element General Sibling Combinator selector ~

/* Style the adjacent LABEL instead */
.input-radio:checked ~ label {
  background: gold;
}

<ul>
  <li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
  </li>

  <li class="wc_payment_method payment_method_creditcard">
    <input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
    <label for="payment_method_creditcard">Credit card</label>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

edited Apr 4, 2020 at 11:51

answered Apr 4, 2020 at 11:39

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

6 Comments

Cray Over a year ago

Thanks, I've tried your code but it doesn't show any effect. But also no errors?! CSS is no option because I need to add a style to the parent element.

Roko C. Buljan Over a year ago

@Cray strange, I provided you working snippets and works like a charm. I cannot guess.

Tushar Over a year ago

@Cray This seems to work as you stated in the question. The reason your code does not work is because you're applying class to all elements. If this is not working, please add description of what is happening.

Roko C. Buljan Over a year ago

@Cray There's 4 lines of JS, please study it - and try to figure out the needed changes you need to apply to your code. Perhaps it's just matter of changing a selector.

Tushar Over a year ago

Probably that comment should have been on the question. It means in $('.wc_payment_method').addClass('active');, the selector will select all li elements having this class. This is the reason, the class is applied to all lis irrespective of the radio inside it is checked or not.

|

Collectives™ on Stack Overflow

jQuery: Add class if list item has checked radio button inside

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related