jQuery 多个单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/209874/
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
jQuery multiple radio buttons
提问by flayto
New to javascript/jquery and having a hard time with using thisor $(this)to get the current object.
javascript/jquery 新手并且很难使用this或$(this)获取当前对象。
I have a table with a set of radio buttonson each row, each named s_<rowindex>. None of the radio buttons are checked by default:
我有一个表，radio buttons每行都有一组，每个名为s_<rowindex>. 默认情况下没有选中任何单选按钮：
<tr>
<td align="left" style="width: 300px">
<div id="div_s_0">
<input type="radio" name="s_0" value="1" />Public
<input type="radio" name="s_0" value="2" />Not Public
<input type="radio" name="s_0" value="3" />Confidential
</div>
</td>
</tr>
<tr>
<td align="left" style="width: 300px">
<div id="div_s_1">
<input type="radio" name="s_1" value="1" />Public
<input type="radio" name="s_1" value="2" />Not Public
<input type="radio" name="s_1" value="3" />Confidential
</div>
</td>
</tr>
I'm trying to write a jQuery function to add a new row to the table whenever the user selects a radio button, but only if they are currently on the last row of the table. What I'd like to do is get the name attribute of the clicked radio button, parse it to get the row index (i.e. the part after the '_') and compare it to the number of rows in the table. If they are equal, add a new row, otherwise, do nothing.
我正在尝试编写一个 jQuery 函数，以便在用户选择单选按钮时向表中添加新行，但前提是它们当前位于表的最后一行。我想要做的是获取单击的单选按钮的 name 属性，对其进行解析以获取行索引（即“_”之后的部分）并将其与表中的行数进行比较。如果它们相等，则添加一个新行，否则，什么都不做。
My question is twofold, depending on how I should attack this:
我的问题是双重的，这取决于我应该如何解决这个问题：
1) How do I return the name attribute of a radio button, OR 2) How do I return the row index of the row I am currently in?
1) 如何返回单选按钮的名称属性，或 2) 如何返回我当前所在行的行索引？
回答by Ryan Duffield
This will get you the index, using the HTML you've provided:
这将使用您提供的 HTML 为您提供索引：
$(document).ready(function() {
$("input:radio").click(function() {
var index = parseInt(this.name.split('_')[1])
});
});
Another thing that may help you: retrieving the number of rows in your table:
另一件可以帮助您的事情：检索表中的行数：
$($("table").children()[0]).children().length
Hope this helps you on your way.
希望这对您有所帮助。
回答by Pseudo Masochist
For your specific questions 1 & 2, if you gave your table an ID of "mytable", this example should give you what you're looking for:
对于您的特定问题 1 和 2，如果您为您的表指定了“mytable”的 ID，则此示例应该为您提供您要查找的内容：
var rowIndex = $("#mytable tr").index($(this).parents("tr"));
var inputName = $(this).attr("name");
alert("Input Name: " + inputName + "; RowIndex: " + rowIndex);
回答by MDCore
Here's some untested code, off the top of my head:
这是一些未经测试的代码，在我的脑海中：
$("#div_s_0 input[type='radio']").onclick = function() {
if ($("#div_s_0 input[type='radio']:last").attr('checked') == 'checked') {
/* add a new element */
}
}
What that does is attach an onclick event to each of the radio buttons in the div. The onclick will check if the last radio button in that group is checked, and if so add another element.
这样做是将一个 onclick 事件附加到 div 中的每个单选按钮。onclick 将检查该组中的最后一个单选按钮是否被选中，如果是，则添加另一个元素。
Like I said it hasn't been tested yet. I'm unsure about the selector (#div_s_0 ... :last) so give it a run in Firebug first.
就像我说的，它还没有经过测试。我不确定选择器 (# div_s_0 ... :last)，所以先在 Firebug 中运行它。
