javascript 多个单选按钮组的事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29755879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event Listener for Multiple Radio Button Groups
提问by Shaggy
How would you have a dynamic Javascript/JQuery event listener to know which radio button group is clicked and retrieve the value of the checked element. For example if I have two radio button groups how would I know which one is clicked? How would I do it for a dynamic number of button groups?
您将如何拥有动态 Javascript/JQuery 事件侦听器来了解单击了哪个单选按钮组并检索已检查元素的值。例如，如果我有两个单选按钮组，我怎么知道点击了哪一个？我将如何为动态数量的按钮组执行此操作？
Example of two radio button groups:
两个单选按钮组的示例：
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<input type="radio" name="input1" value="option1"/>
<input type="radio" name="input1" value="option2"/>
</div>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<input type="radio" name="input2" value="option1"/>
<input type="radio" name="input2" value="option2"/>
</div>
Edit:For anyone else wondering which of the following question below so far is "more" right, both are correct as .change(function(e) {is a shortcut for .on('click', function(e) {
编辑：对于想知道以下哪个问题到目前为止“更多”正确的其他人，两者都是正确的，因为这.change(function(e) {是.on('click', function(e) {
Edit 2:Removed ID's
编辑 2：删除了 ID
回答by ecarrizo
This jquery will execute a callback that print in the console the name and the value of the 'clicked' (not changed) radio button.
这个 jquery 将执行一个回调，在控制台中打印“点击”（未更改）单选按钮的名称和值。
$('input:radio').on('click', function(e) {
console.log(e.currentTarget.name); //e.currenTarget.name points to the property name of the 'clicked' target.
console.log(e.currentTarget.value); //e.currenTarget.value points to the property value of the 'clicked' target.
});
try it: Fiddle
试试看： 小提琴
回答by Shaggy
To provide a pure JavaScript solution: create a collection for all your radio type inputs and then loop through them all adding an event listener to each. Using this, you can then access any attributes or properties you wish and, if necessary, the parent element as well.
提供纯 JavaScript 解决方案：为所有无线电类型输入创建一个集合，然后循环遍历它们，为每个输入添加一个事件侦听器。使用this，您可以访问您希望的任何属性或属性，如有必要，还可以访问父元素。
var inputs=document.querySelectorAll("input[type=radio]"),
x=inputs.length;
while(x--)
inputs[x].addEventListener("change",function(){
console.log("Checked: "+this.checked);
console.log("Name: "+this.name);
console.log("Value: "+this.value);
console.log("Parent: "+this.parent);
},0);
Alternatively, as you mention that the number of groups is dynamic, you might need a live node list, which requires a little extra code to check the inputtype:
或者，正如您提到的组数是动态的，您可能需要一个活动节点列表，这需要一些额外的代码来检查inputtype：
var inputs=document.getElementsByTagName("input"),
x=inputs.length;
while(x--)
if(inputs[x].type==="radio")
inputs[x].addEventListener("change",function(){
console.log("Checked: "+this.checked);
console.log("Name: "+this.name);
console.log("Value: "+this.value);
console.log("Parent: "+this.parent);
},0);
回答by Derek S
Find the name of the input on the changeevent.
查找change事件输入的名称。
$('input:radio').on('change', function(e){
var name = e.currentTarget.name,
value = e.currentTarget.value;
$('.name').text(name);
$('.value').text(value);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<input type="radio" name="input1" id="input1" value="option1"/>
<input type="radio" name="input1" id="input1" value="option2"/>
</div>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<input type="radio" name="input2" id="input2" value="option1"/>
<input type="radio" name="input2" id="input2" value="option2"/>
</div>
<p>Name: <b class="name"></b></p>
<p>Value: <b class="value"></b></p>回答by Josue Morales
Edit: For anyone else wondering which of the following question below so far is "more" right, both are correct as .change(function(e) { is a shortcut for .on('click', function(e) {
编辑：对于想知道以下哪个问题到目前为止“更多”正确的其他人，两者都是正确的，因为 .change(function(e) { 是 .on('click', function(e) { 的快捷方式)
Yes, .change(function(e) {is a shortcut for .on('click', function(e) {, but when you are working with partial views for example in MVC, with .change(function(e) {the link or buttons in the page lose the hiperlink or don't work correctly, so you have to work with .on('click', function(e) {where the hiperlink work fine.
是的，.change(function(e) {是 的快捷方式.on('click', function(e) {，但是当您使用部分视图（例如在 MVC 中）时，.change(function(e) {页面中的链接或按钮会丢失 Hiperlink 或无法正常工作，因此您必须使用 .on('click', function(e) {hiperlink 工作正常的地方。
