时间戳

首页 > 解决方案 > 在更改事件中获取单击的单选按钮 Id

javascript - 在更改事件中获取单击的单选按钮 Id

问题描述

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

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

请帮助，在此先感谢

标签： javascriptjqueryhtml

解决方案

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

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

推荐阅读