Question

我发现了类似的问题，但我的情况有所不同，我在多个单选按钮中有相同的class name，我想弄清楚单击了哪个单选按钮？ HTML代码就像 -

<input type='radio' value='1' id='country_1' name='countries' class='option_selector'>
<label for='country_1'>India</label>
<input type='radio' value='2' id='country_2' name='countries' class='option_selector'>
<label for='country_2'>USA</label>
<input type='radio' value='3' id='country_3' name='countries' class='option_selector'>
<label for='country_3'>UK</label>

<input type='radio' value='1' id='city_1' name='cities' class='option_selector'>
<label for='city_1'>Jaipur</label>
<input type='radio' value='2' id='city_2' name='cities' class='option_selector'>
<label for='city_2'>Delhi</label>
<input type='radio' value='3' id='city_3' name='cities' class='option_selector'>
<label for='city_3'>Mumbai</label>

我的jQuery就像 -

$('.option_selector').click(function () {
    var id = $('.option_selector').attr('id');
    alert(id);
});

但它总是返回具有类名id

的第一个元素的option_selector

Answer 1

您需要使用this来引用点击的元素

$('.option_selector').click(function() {
  var id = this.id;
  // or var id = $(this).attr('id');
  alert(id);
});

Answer 2

您在此处重新选择所有匹配元素：

$('.option_selector').attr('id');

但由于click处理程序在单击的元素的上下文中运行，因此您只需使用this关键字来引用该元素：

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

或者可能更简单：

this.id;

Answer 3

正如已经指出的，关键是使用关键字this将上下文保留在当前广播按钮中。因此var id = $('.option_selector').attr('id');应为：

var id = this.id;

但是，适用于单选按钮（和复选框）的一个事件是change事件。您只想在change：

之后触发代码

$('.option_selector').change(function() {
    var id = this.id;
    alert(id);
});

或者：

$('.option_selector').on('change', function() {
    var id = this.id;
    alert(id);
});

Answer 4

我不确定您监控点击事件的内容，但获取所选选项的简单方法是：

$('.option_selector:checked');

这将为您提供仅选中复选框的列表。然后你可以通过并获得你想要的ID或其他任何东西。

$('.option_selector:checked').each(function() {
var $currentcheckbox = $(this);
});

这是监控所有点击事件的替代方法。

从jquery中的类名获取元素id

4 个答案: