jQuery-将文本添加到每个单选输入的同一行答案

【问题标题】：jQuery- Add text to same line of each radio inputjQuery-将文本添加到每个单选输入的同一行
【发布时间】：2013-05-24 06:24:15
【问题描述】：

因此，我正在尝试进行动态测验，并且正在努力将文本添加到我的收音机输入中。我使用 for 循环进行多个无线电输入。我希望文本与每个单选选项位于同一行，但我无法做到这一点。

当我使用append() 时，它会创建一个新行，然后添加文本。

for (j = 0; j < 5; j++) {
            $('#target').append('<input type="radio" name="radioName"/>')
            $('#target').append('<p>My text here</p>');

当我使用label for html 属性时，它会将文本添加到所有收音机的末尾。

for (j = 0; j < 5; j++) {
            $('#target').append('<input type="radio" name="radioName"/>').after("<label for='radio'>text here</label>");

这是我的 jsFiddle 示例：http://jsfiddle.net/tCkuF/2/

理想情况下，我想添加一个将对象表示为文本的变量，以便在进行测验时自动更改。

【问题讨论】：

标签： javascript jquery radiobuttonlist

【解决方案1】：

这种情况建议使用列表元素

<div id="container">
    <div id="question"></div>
    <div id="target">
        <ul id="options">

        </ul>
    </div>
</div>

也给出样式

#options{
    list-style:none;
    list-style-type:none;
}

然后添加li 元素。为使用for 属性提供正确的id

var $li = $("<li>").appendTo("#options");
$li.append('<input id="option' + (j+1) + '" type="radio" name="question' + i + '" value="' + allQuestions[i].correctAnswer + '"/>');
$li.append("<label for='option" + (j+1) + "'>test: label for adds all to the end    </label>");

演示：http://jsfiddle.net/tCkuF/6/

【讨论】：

【解决方案2】：

只需在radio & 'label' 周围添加一个 div 包装器，即可实现您想要的输出。检查这个out：

$(function () {
var i = 0;
var allQuestions = [{
    question: "What is 4x6?",
    choices: [46, 15, 25, 24],
    correctAnswer: 3
}, {
    question: "What is 21x 21?",
    choices: [441, 2121, 388],
    correctAnswer: 0
}, {
    question: "Which number is prime?",
    choices: [1, 5, 10, 39],
    correctAnswer: 1
}, {
    question: "What is 65/5",
    choices: [3, 31, 12, 13, 21],
    correctAnswer: 3
}];

function populateQuestion() {
    $("#question").text(allQuestions[i].question); //add question
    var $target = $('#target'),
        j = 0;
    //add radio and answer choices
    for (j; j < allQuestions.length; j++) {

        (function (idx) {

            var html = '<div class="answerRow"><input class="answerRadio" type="radio" name="question' + idx + '" value="' + allQuestions[idx].correctAnswer + '"/><label class="answerRadioLabel"  for="question' + idx + '">test: label for adds all to the end    </label>';
            $target.append(html);
        })(j);
    }
}

populateQuestion();


}); //onload jQuery close

【讨论】：

【解决方案3】：

您必须删除 ‍‍‍<p> 标签并在每一行添加一个额外的<br/>

$('#target').append('test append creates a line space<br/>');

在http://jsfiddle.net/tCkuF/3/查看演示

【讨论】：