javascript - jQuery 在不同的单选按钮组中选择单选按钮索引

Question

我正在使用 jQuery append() 函数创建多组以不同名称分组的单选按钮。

每个组都有多个单选按钮并具有不同的组名称。现在的问题是我希望能够使用 jQuery 找到特定组的所选单选按钮的索引。不知道该怎么办

<input type='radio' name='group1' value='g1v1'>
<input type='radio' name='group1' value='g1v2'>
<input type='radio' name='group2' value='g2v1'>
<input type='radio' name='group2' value='g2v2'>

现在使用 jQuery 选择 group1 的选中单选按钮

$("input[type='radio'][name='group1']:checked").index();

总是给我0。我不知道我哪里做错了以及该怎么做。

Answer 1

由于您没有使用不同的容器对单选按钮进行分组，因此 index() 在这种情况下将不起作用。您可以使用prevAll() 方法。更改单选按钮时，获取其名称，并选择具有此名称的所有先前单选按钮，然后获取它们的长度，如下所示。

$(document).on("change", "input[type='radio']", function() {
    var index = $(this).prevAll("[name=" + this.name + "]").length;
    alert(index);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='group1' value='g1v1'>G1 0
<input type='radio' name='group1' value='g1v2'>G1 1
<input type='radio' name='group1' value='g1v3'>G1 2
<input type='radio' name='group2' value='g2v1'>G2 0
<input type='radio' name='group2' value='g2v2'>G2 1
<input type='radio' name='group2' value='g2v3'>G2 2