从jquery中的类名获取元素id

I found similar questions, but difference in my case is, I have same class name in multiple radio-buttons, and I want to figure out which radio button is clicked? HTML code is like -

我发现了类似的问题,但我的情况有所不同,我在多个单选按钮中有相同的类名,我想弄清楚单击了哪个单选按钮? 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>

My jQuery is like -

我的jQuery就像 -

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

But it always returns the id of 1st element having the class name option_selector

但它总是返回具有类名option_selector的第一个元素的id

4 个解决方案

#1

You need to use this to refer clicked element

您需要使用它来引用单击的元素

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

#2

You're re-selecting all matching elements here:

你在这里重新选择所有匹配的元素:

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

But since the click handler runs in the context of the element which was clicked, you can just use the this keyword to refer to that element:

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

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

or possibly, even more simply:

或者更简单地说:

this.id;

#3

As has been pointed out, the key is to use the keyword, this to keep the context within the current radio button. Thus var id = $('.option_selector').attr('id'); should be:

正如已经指出的那样,关键是要使用关键字,这样可以将上下文保持在当前的单选按钮中。因此var id = $('。option_selector')。attr('id');应该:

var id = this.id;

However, the one event that is appropriate to use with radio buttons (and checkboxes) is the change event. You only want to fire the code when there's been a change:

但是,适用于单选按钮(和复选框)的一个事件是change事件。您只想在发生更改时触发代码:

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

Or:

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

#4

I'm not sure what you are monitoring the click events for but a simple way to get the options that are selected is:

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

$('.option_selector:checked');

This will give you a list of only the checked checkboxes. Then you can go through and get the ids or whatever you would like.

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

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

This is an alternative to monitoring all of the click events.

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

#1