How to get last selected radio button id

Question

I have two UL lists with some radio buttons. Now I want to get last selected radio button ID attribute form their UL .

For example:

• If I selected radio button from first UL then return selected radio ID .
• If I selected radio button from second UL then return seledted radio ID .

I have tried bellow code but not working properly. If you try with selecting first radio button from first UL you will get alert with selected ID , but when you selected radio button from second UL you will get alert from first UL and that I dont want. :(

I want to get last checked radio button ID from that UL .

Any idea how to do this?

Can you please check with this way:

• First select 20 from first UL you will get 20.
• Second select 80 from second UL you will get 80.

Now again change radio button from first UL and that changed radio ID I want.

Here is my JSFiddle .

Thanks.

 $("#update_cart").click(function() { var radioID = $("input[type='radio']:checked").attr("id"); if (radioID) { alert(radioID); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <ul class="one"> <li> <label for="1" class="label_check"> <input type="radio" id="1" name="one" value="10">10 </label> </li> <li> <label for="2" class="label_check"> <input type="radio" id="2" name="one" value="20">20 </label> </li> <li> <label for="3" class="label_check"> <input type="radio" id="3" name="one" value="30">30 </label> </li> <li> <label for="4" class="label_check"> <input type="radio" id="4" name="one" value="40">40 </label> </li> <li> <label for="5" class="label_check"> <input type="radio" id="5" name="one" value="50">50 </label> </li> </ul> <ul class="two"> <li> <label for="6" class="label_check"> <input type="radio" id="6" name="two" value="40">60 </label> </li> <li> <label for="7" class="label_check"> <input type="radio" id="7" name="two" value="70">70 </label> </li> <li> <label for="8" class="label_check"> <input type="radio" id="8" name="two" value="100">80 </label> </li> <li> <label for="9" class="label_check"> <input type="radio" id="9" name="two" value="120">90 </label> </li> <li> <label for="10" class="label_check"> <input type="radio" id="10" name="two" value="120">100 </label> </li> </ul> <input type="button" id="update_cart" class="update_cart" value="Update Cart"> 

Answer 1

Use

$("#update_cart").click(function () {
  var radioID = $("input[type='radio'].active").attr("id");
  if (radioID) {
      alert(radioID);
  }
});

$("input[type='radio']").click(function(){
  $('.active').removeClass('active');
     $(this).addClass('active');
});

Working Demo