单选按钮选择无法按预期工作

时间:2016-07-01 07:25:57

标签: javascript jquery html

我正面临使用html和JS的现有代码的问题。该页面有一个html表,其中有一个单选按钮和4个其他字段。当我们通过控制器设置值时,动态创建表。我也可以在表中添加新的行,这些行是通过JS完成的。现在问题是我从控制器插入了2行,并通过单击按钮添加了一个新行。所以我现在有3个单选按钮。如果我在控制器插入的行中选择一个单选按钮,它只选择一个,这很好,如果我选择第三个,我可以看到两个选中的单选按钮,这是不正确的。在任何情况下,它应该只选择一个。当我采取查看源我没有看到javascript添加新行的条目,所以我希望问题是因为生成的Id?请让我知道如何解决这个问题?

Java控制器

List <MyQuestion> fetchedQuestions =  AppImpl.getMyQuestions(id);

            for (int index=0; index< fetchedQuestions.size() ; index++){
                MyQuestion questionsToAdd= fetchedQuestions.get(index);
                questionList.add(questionsToAdd);

            }

            myqstntemplate.setMyQuestions(questionList);
            templatebean.setQuestionTemplate(myqstntemplate);

        }

JScode

function addRow(){
    isDirty=true;
     if(document.getElementById('value').value != 'value'){
        rowNumber = document.getElementById('questionsSize').value;
        document.getElementById('value').value='value';//other option is novalue
    } 

    var questionId=document.getElementById('questionsSize').value;
    questionId=parseInt(questionId)+1;
    document.getElementById('questionsSize').value = questionId;
    var newRow = $('<tr/>').attr('id', 'row' + rowNumber);
    //Add some HTML to the row
    newRow.html('<td><input type="hidden" id="newQuestion'+rowNumber+'" value="'+questionId+'"/><input id="question" name="question" type="radio" style="width:20px;" value=""  onclick="setSelectedQuestion(\''+rowNumber+'\',\'new\')"/></td><td class="newRow" align="center" style="vertical-align: middle;">'+questionId+'<input type="hidden" value="newQuestion"/></td> <td colspan="2"><input style="width: 397px;" id="myQstnTemplate.questions['+rowNumber+'].question" name="myQstnTemplate.questions['+rowNumber+'].question" type="text" value=""  maxlength="256" onclick="enableDirty()" style="text-align:left;"/><div id="pencil" title="Edit helptext" class="pencil-img fltRight" style="border: 0pt;padding-right: 15px; " onclick="displayHelpText('+rowNumber+',\'new\');return false;"></div><input id="myQstnTemplate.questions['+rowNumber+'].questionId" name="myQstnTemplate.questions['+rowNumber+'].questionId" type="hidden" value="-1" /><input style="width: 350px;" id="myQstnTemplate.questions['+rowNumber+'].helptext" name="myQstnTemplate.questions['+rowNumber+'].helptext" type="hidden" value="" onclick="enableDirty()" style="text-align:left;"/></td><td><select style="width:100px;" id="myQstnTemplate.questions['+rowNumber+'].schemeId" name="myQstnTemplate.questions['+rowNumber+'].schemeId"><option value="-1">Select</option><c:forEach var="answer" items="${myqstionTemplateBean.answerTypes}"><option title="${answer.questions}" value="${answer.displaySchemeId}">${answer.answerTypeName}</option></c:forEach></select></td> <td><div><input type="hidden" id="question'+rowNumber+'" name="question'+rowNumber+'" value="'+rowNumber+'"/><select id="myQstnTemplate.questions['+rowNumber+'].ansId" name="myQstnTemplate.questions['+rowNumber+'].ansId" style="width:100%"><option value="-1">Select</option><c:forEach var="ansId" items="${myqstionTemplateBean.ansIds}"><option value="${ansId}" <c:if test="${ansId eq question.ansId}">selected</c:if>>${ansId}</option></c:forEach></select></div></td>');
    //Append the new row to the body of the #myTable table
        $('#qstionTable tbody').append(newRow);
                        //Iterate row number
    rowNumber++;

}

1 个答案:

答案 0 :(得分:0)

如果您希望所有单选按钮一起工作,则模板中的每个按钮都应具有相同的名称
检查一下。
编辑:
如果可以选择几个单选按钮,那是因为他们的名字是不同的。您的收音机名称不得取决于rowNumber。设置硬名称,而不是变量名称 检查一下。