选择动态填充的单选按钮

Question

我有一个调查，有一堆问题，包括实际问题，一些是或否的单选按钮和一个评论框。我加了一张照片给你看。下面是填充问题后的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)));

Answer 1

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

例如，如果您使用answerId=2创建一个$yesNoQuestionRow，您可以选择该行并使用以下命令获取无线电输入值：

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

编辑：我刚刚注意到你说你有一个隐藏的数据属性，它会根据收件人的不同而改变。如果该属性是data-ACK erid属性，只需创建另一个属性，该属性根据问题/答案而不是收件人而变化。或者您可以动态地创建唯一的常规id属性。