在更改事件中获取单击的单选按钮 ID [重复]答案

【问题标题】：Get the clicked radio button Id in the change event [duplicate]在更改事件中获取单击的单选按钮 ID [重复]
【发布时间】：2019-08-23 09:32:13
【问题描述】：

我有几组同名的单选按钮。

我想在更改事件中获取单击的单选按钮的 id。有几个与此问题相关的答案，但它们都返回 checked 的 id，但我想要的是 clicked 无线电 id。

更新这是我的代码：

$('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>

请帮忙，提前谢谢

【问题讨论】：

代码在哪里？
你应该使用this对象，请查看我的答案...

标签： javascript jquery html

【解决方案1】：

您应该使用 this 来引用当前元素。

试试$(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>

【讨论】：

【解决方案2】：

您可以在点击输入时使用 jquery 来完成（在输入时您也可以放置类）：

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

这是工作小提琴：https://jsfiddle.net/m7r5z9g1/

【讨论】：

这会起作用，但这会触发我不想要的所有其他点击事件
这就是我添加on input you can also put class的原因
点赞$(document).on('click', 'yourClassName', function(){

【解决方案3】：

首先为所有单选按钮赋予相同的类，如“MyRadio”，然后创建以下事件。

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

【讨论】：

【解决方案4】：

您也可以使用 prop 方法来检索所选项目的 id。

下面是 Onchange 函数的 sn-p ：

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

这是demonstration的链接：

更多见解：

.prop() 方法仅获取匹配集中第一个元素的属性值。它为尚未设置的属性的值返回 undefined，或者如果匹配的集合没有元素。要单独获取每个元素的值，请使用循环构造，例如 jQuery 的 .each() 或 .map() 方法。

Reference :

【讨论】：