Question

我有一个jsfiddle应用程序here，在正确显示单选按钮时遇到问题。

如果打开应用程序，您会在顶部看到一组单选按钮。请选择其中一个单选按钮，然后单击“添加单选按钮”按钮，将下面的单选按钮添加到表格行中。现在的问题是：

首先，“Multiple”一词不会出现在第二个单选按钮的表格行中。这应该出现。
其次，它没有检查我在顶部选择的单选按钮。例如，如果我在顶部选择了“单个”，当我添加一个新行时，它应该检查新行中“单个”的单选按钮。
最后，我可以在表格行中选择一个单选按钮，但如果我这样做，那么顶部的一个单选按钮的选择将变为未选中状态。这不应该发生。

如果我检查其中一个表行中的单选按钮，它应该对顶部的收音机底部没有任何影响。

如何解决这些问题？

Answer 1

这是因为您正在创建新的输入单选按钮，但没有为它们指定唯一的名称。并且为了保持选中的状态，您必须首先从顶部的单选按钮中找到已选中的元素，然后将其设置为新创建的单选按钮。

我已经解决了所提到的所有3个问题，看看工作演示。

<强> Demo

Answer 2

1）文本节点需要包含在某些内容中。当我在HTML周围添加<p>标记时，它正常工作：http://jsfiddle.net/6TcwS/2/

2）那是因为您正在解析新的HTML以在下面添加按钮时生成按钮。如果要保留按钮状态，则必须从页面克隆真实的DOM元素：http://jsfiddle.net/6TcwS/6/

3）您必须更改新按钮的名称以避免这种行为。

Answer 3

这是你修改过的函数：ans of 1和2

function insertQuestion(form) {
    var $tbody = $("<tbody></tbody>");
    var $tr = $("<tr class='optionAndAnswer'></tr>");
    var $replies = $("<td class='noofreplies'></td>");
    var $this = $(this);
    var $btnReply = "<input type='radio' name='reply1' value='single' class='replyBtn' checked=" + $(':radio[value="single"]').is(':checked') + " /> Single<br /><input type='radio' name='reply2' value='multiple' class='replyBtn' checked=" + (':radio[value="multiple"]').is(':checked') + " /> Multiple";
    $replies.append($btnReply);
    $tbody.append($tr);
    $tr.append($replies);
    $('#qandatbl').append($tbody);
}

for ans 3：不要为两个无线电使用相同的名称

单选按钮有3个问题

3 个答案: