Question

我有三个这样的单选按钮：

<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的值。在我的案例中添加事件处理程序的正确方法是什么？

Answer 1

尝试

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

或者，如果您正在使用＆lt; jQuery 1.7

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

Answer 2

与任何异步迭代值一样，您需要关闭循环中的值：

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

当调用事件处理程序时，i变量的值将达到其最大值（在本例中为3）。

将数据传递给每个处理程序的另一种方法是使用on method的data参数：

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

Answer 3

你必须使用一个闭包来记住每一步的索引值。以下是许多可能的方法之一：

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

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

3 个答案: