选择动态填充的单选按钮

时间:2015-11-06 21:31:56

标签: jquery html

我有一系列问题的调查,包括实际问题,一些是或否单选按钮和评论框。我已经包含了一张图片来给你一个视觉效果。这是填充问题后的html结构。

<div class=”yesno-question-row”>

<span class=”yesno-question”> 

    Some Question………..

</span>

 <span class=”yesno-answer”>

     <span class=”yesno-radio required”>

           <input type=”radio” class=”yesno-radio-button” value=”Yes” />

           <input type=”radio” class=”yesno-radio-button” value=”No” />

     </span>

 <span class=”yesno-comment”>

           <textarea class="yesno-textarea ui-widget-content"></textarea>

 </span>

   </span>

</div>

此信息通过Web服务和jquery动态填充。看起来动态填充这些问题每个问题都包含相同的类名,范围名称等...有40多个问题,这些问题被附加到div。

我要做的是选择一个特定问题并选中一个特定的单选按钮。然后,如果单击某个单选按钮,则会自动检查其他按钮。我相信Jquery是我最好的选择,这导致我尝试按类选择元素 - 它们都有相同的类,所以不起作用,我试图通过隐藏的数据属性选择元素 - 这不起作用看到该属性会根据调查发送给谁的方式而变化。我尝试做更多的研究,我认为下一个最好的事情是使用jquery eq()属性,因为我将能够根据它的位置选择一个元素。但是,我在实施此解决方案时遇到问题。如果您有更好的选择或如何最好地进行的视觉示例,我将非常感激。

以下是创建问题的代码;

  var $yesNoQuestionRow = $("<div class='yesno-question-row' data-answerid='" + answerId + "'/>");
            var question = "<span class='yesno-question'>" + questionText + "</span>";
            var radioId = "yesno" + answerId;
            var radioChecked = new Object();
            radioChecked[answerText] = "checked";
            var yesno = "<span class='yesno-radio required'><input class='yesno-radio-button' type='radio' name='" + radioId + "' value='Yes' " + radioChecked["Yes"] + ">Yes <input class='yesno-radio-button' type='radio' name='" + radioId + "' value='No' " + radioChecked["No"] + ">No</span>";
            var textarea = "<span class='yesno-comment'> <textarea class='yesno-textarea ui-widget-content'>" + commentText + "</textarea></span>";
            return $yesNoQuestionRow.append($(question)).append($("<span class='yesno-answer'/>").append($(yesno)).append($(textarea)));

1 个答案:

答案 0 :(得分:0)

您已经拥有一个动态命名的属性,您应该为您的元素提供唯一的名称,因此您可以使用它来选择它们。

例如,如果您使用$yesNoQuestionRow创建answerId = 2,则可以选择行并获取无线电输入值:

$(".yesno-question-row[data-answerid='2']").find(".yesno-radio-button:checked").val()

编辑:我刚注意到你说你有一个隐藏数据属性,根据收件人的不同而改变。如果该属性是data-answerid属性,则只需创建另一个根据问题/答案而不是收件人而变化的属性。或者您可以动态创建唯一的传统id属性。