Question

如何让动态Javascript / JQuery事件监听器知道单击哪个单选按钮组并检索已检查元素的值。例如，如果我有两个单选按钮组，我怎么知道哪一个被点击？如何为动态数量的按钮组执行此操作？

两个单选按钮组的示例：

<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>

编辑：其他任何人想知道目前为止下面的哪个问题是＆＃34;更多＆＃34;是的，两者都是正确的，因为.change(function(e) {是.on('click', function(e) {

的快捷方式

编辑2：删除了ID

Answer 1

此jquery将执行一个回调，在控制台中打印＆＃39; clicked＆＃39;的名称和值。（未更改）单选按钮。

$('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.
});

尝试一下： Fiddle

Answer 2

在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>

Answer 3

提供纯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);

或者，正如您所提到的组数是动态的，您可能需要一个实时节点列表，这需要一些额外的代码来检查input type：

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);

Answer 4

编辑：对于其他任何想知道下面到目前为止下面哪个问题是＆＃34;更多＆＃34;是的，两者都是正确的.change（function（e）{是.on的快捷方式（＆＃39; click＆＃39;，function（e）{

是的，.change(function(e) {是.on('click', function(e) {的快捷方式，但是当您使用部分视图（例如在MVC中）时，使用.change(function(e) {页面中的链接或按钮会丢失hiperlink或不能正常工作，所以你必须使用h .on('click', function(e) {才能正常工作。

多个单选按钮组的事件监听器

4 个答案: