Issue with 'click' function in 'each' loop

Question

Basically, I have multiple UL's with a class "list". Each of them has multiple radio buttons. I would like to do something with span element upon the last radio option of individual UL's being checked. And undo it after another radio button of that same UL is being checked.

The code essentially works but it is triggering for all of the UL's instead of the one in which the click occurred.

I used alert (which is commented out) to check if I'm getting everything with 'each' and it seems to work fine.

$(document).ready(function() {
  $('ul.list').each(function() {
    //alert($(this).text());
    $("ul.list input[type$='radio']").click(function() {
      if ($("li:last-of-type input[type$='radio']").prop("checked")) {
        // do something with span
      } else {
        // do something with span
      }
    });
  });
});

<ul class="list">
  <li><input type="radio">Option 1</input>
  </li>
  <li><input type="radio">Option 2</input>
  </li>
  <li><input type="radio">Bonus</input><span>Bonus text</span></li>
</ul>

<ul class="list">
  <li><input type="radio">Option 1</input>
  </li>
  <li><input type="radio">Option 2</input>
  </li>
  <li><input type="radio">Bonus</input><span>Bonus text</span></li>
</ul>

Zakaria Acharki · Accepted Answer · 2017-11-15 17:21:50Z

3

Actually you don't need the loop in this case just attach the click directly to the selector :

$(document).ready(function() {
  $("ul.list :radio").click(function() {
    if ( $(this).prop("checked") ) 
    {
      // do something with span
    } else {
      // do something with span
    }
  });
});

NOTE 1 : The input are self-closing tags so thsy should be like :

<input type="radio"/>Option 1

Instead of :

<input type="radio">Option 1</input>

NOTE 2 : Use this keyword to target the clicked element instead :

if( $(this).prop("checked") ){

Hope this helps.

$(document).ready(function() {
  $("ul.list :radio").change(function() {
    if ( !$(this).is(':last-child') && $(this).is(":checked") ) 
    {
      $(this).closest("ul").find('span').show();
    }else{
      $(this).closest("ul").find('span').hide();
    }
  });
});

ul.list li>span{
   display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li><input type="radio" name="same_name_1" checked/>Option 1</li>
  <li><input type="radio" name="same_name_1" />Option 2</li>
  <li><input type="radio" name="same_name_1" />Bonus<br><span>Bonus text</span></li>
</ul>

<ul class="list">
  <li><input type="radio" name="same_name_2" checked/>Option 1</li>
  <li><input type="radio" name="same_name_2" />Option 2</li>
  <li><input type="radio" name="same_name_2" />Bonus<br><span>Bonus text</span></li>
</ul>

edited Nov 15, 2017 at 17:21

answered Nov 15, 2017 at 15:39

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

4 Comments

Joe Dev Over a year ago

I used your "note 2" example with :radio and "this". It didn't work the way I need it to work. I use exclusive radio buttons. In each ul only one option can be selected and only the last-of-type in each ul should be the trigger for span change. I tried with alert('checked') and alert('unchecked') and I only get "checked" no matter which radio button I click.

Joe Dev Over a year ago

Updated snippet gets me really close! The green color should only be triggered when the last radio is clicked and if option 1 or 2 is clicked, the color of span should be back to default. :)

Zakaria Acharki Over a year ago

Condition !$(this).is(':last-child') mean if the radio button isn't the last child of the li, what is the case of the last radio's when the span is the last child...

Joe Dev Over a year ago

One more question! In my case, every ul.class has the first radio button checked by default. Also, I'm trying to use .css('display', 'none') for span by default and .css('display', 'block') upon action. And for some reason that is not working for me? Is it because of the radio button being checked by default?

Collectives™ on Stack Overflow

Issue with 'click' function in 'each' loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related