Get the clicked radio button Id in the change event

Question

I have several groups of radio buttons with the same name.

I want to get the id of the clicked radio button in the change event. There are several answers related to this question but they all return the id of the checked one but what i want is clicked radio id.

Updated Here is my code:

$('input[type=radio][name=SltOptionPane]').change(function () {
  debugger;
  //here i want to get the clicked id of the radio
  var selectedValue = $("input[name=SltOptionPane]");
  alert(selectedValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="26Panel">
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="27" id="27" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;طبيعي</text>
    </label>
  </div>
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="29" id="29" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;ضعيف</text>
    </label>
  </div>
</div>

<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="27Panel">
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="30" id="30" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;طبيعي</text>
    </label>
  </div>
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="31" id="31" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;ضعيف</text>
    </label>
  </div>
</div>

Please help ,Thanks in advance

You should use `this` object, please check my answer... – Mamun Apr 02 '19 at 06:44 — Mamun, Apr 02 '19 at 06:44

Mamun · Accepted Answer · 2019-04-02T06:46:59.797

You should use this to refer the current element.

Try $(this).attr('id');

$('input[type=radio][name=SltOptionPane]').change(function () {
  debugger;
  //here i want to get the clicked id of the radio
  var selectedValue = $(this).attr('id');
  alert(selectedValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="26Panel">
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="27" id="27" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;طبيعي</text>
    </label>
  </div>
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="29" id="29" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;ضعيف</text>
    </label>
  </div>
</div>

<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="27Panel">
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="30" id="30" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;طبيعي</text>
    </label>
  </div>
  <div class="col-md-6">
    <label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
    <span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="31" id="31" autocomplete="off"><text>&nbsp;&nbsp;&nbsp;ضعيف</text>
    </label>
  </div>
</div>

score 1 · Answer 2 · answered Apr 02 '19 at 06:39

1

You can do it with jquery on click input (on input you can also put class):

$(document).on('click', 'input', function(){
    alert(this.id);
});

Here is working fiddle: https://jsfiddle.net/m7r5z9g1/

answered Apr 02 '19 at 06:39

Ingus

1,026
12
34

This will work but this will trigger all other click events that i do not want – Shyamal Apr 02 '19 at 06:46
That is why i added `on input you can also put class` – Ingus Apr 02 '19 at 06:46
Like `$(document).on('click', 'yourClassName', function(){` – Ingus Apr 02 '19 at 06:47

score 0 · Answer 3 · answered Apr 02 '19 at 06:51

0

At first give all radio buttons same class like "MyRadio" then create the following event.

$('.MyRadio').off('click').on('click', function(){
  alert(this.attr('id'));
});

answered Apr 02 '19 at 06:51

Mahmoud Abdeen

112
9

redhatvicky · Answer 4 · 2019-04-02T22:34:45.977

You can also use the prop method in order to retrieve the id of the selected item.

Here below is snippet of the Onchange function :

$('input[type=radio][name=SltOptionPane]').change(function () {
  debugger;
  var currentValue = $(this).prop("id");
  alert(currentValue);
});

Here is the link for the demonstration:

More Insights :

The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

Reference :

Get the clicked radio button Id in the change event

4 Answers4