如何将侦听器连接到多个单选按钮？

问题描述：

<input type="radio" name="P_1" value="1">Yes</input> 
<input type="radio" name="P_1" value="2">No</input> 

<input type="radio" name="P_2" value="1">Yes</input> 
<input type="radio" name="P_2" value="2">No</input> 

<input type="radio" name="P_3" value="1">Yes</input> 
<input type="radio" name="P_3" value="2">No</input>

我想添加一个侦听每个单选按钮，这样，当他们改变我会通知您。我正在做这样的事情：

for (var i = 1; i <= 3; i++) { 
      $("input[name='P_" + i + "']").live('change', function() { 
       doProcessing("P_" + i, $("input[name='P_" + i + "']:checked").val()); 
      }); 
}

但是，这似乎并不奏效。它将doProcessing与i设置为4，因为这是for循环结束时的值i。在我的情况下添加事件处理程序的正确方法是什么？

答

尝试

$('input:radio').on('change', function(){ 
    //access value of changed radio group with $(this).val() 
});

或者，如果你使用jQuery的< 1.7

$('input:radio').live('change', function(){ 
    //do stuff with $(this).val() 
});

是的，我想知道他为什么没有做这种方式也。 OP，你可以提供一些反馈，说明你为什么在全部呼叫相同功能时创建不同的“实时”呼叫？乔的解决方案似乎更简单，更优雅。 – mrtsherman 2012-04-16 00:34:47

只是愚蠢的我！非常感谢你采用这种方法。今天救了我:) – Legend 2012-04-16 03:52:05

没问题。很高兴我能帮上忙。 – Joe 2012-04-16 12:07:01

答

你必须使用一个闭包来记住每一步的索引值。这里的许多可能的方式做到这一点之一：

for (var i = 1; i <= 3; i++) { 
    $("input[name='P_" + i + "']").live('change', createListener(i)); 
} 

function createListener(index) { 
    return function() { 
     doProcessing("P_" + index, $("input[name='P_" + index + "']:checked").val()); 
    } 
}

答

与任何异步迭代值，则需要收，较值的循环：

for (i = 0; i < 3; i++) { 
    (function(i){ 
     ...your code here... 
    }(i)); 
}

由当时的事件处理程序被调用时，i变量的值将达到其最大值（在这种情况下为3）。

将数据传递到每个处理器的替代手段，将使用data参数on method的：

for (i = 0; i < 3; i++) { 
    $(...selector...).on('change', null, {i:i}, function (e) { 
     //access the i value with: e.data.i 
    }); 
}

它可能是更好的只是检查的处理程序中的权值，并使用一类附加事件：

$(document).on('change', '.someClass', function (e) { 
    var i, 
     $this; 
    $this = $(this); 
    i = $(this).attr('name').substr(2); 
    i = parseInt(i, 10); 
    ...your code here... 
});

如果你不能改变的标记，那么你可以使用'[name^="P_"]'在'.someClass'的地方。

如何将侦听器连接到多个单选按钮？

相关推荐