CODEWITHSUNDEEP
javascriptjquery
Joe Dev
Joe Dev

Reputation: 17

Issue with 'click' function in 'each' loop

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>

Upvotes: 1

Views: 71

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 3

Related Questions