Question

我需要一些单选按钮和输出到单个文本框的帮助。

我想要实现的是在不使用php的情况下在一个文本框中选择单选按钮结果，所以：

问题1：什么颜色？ A1：蓝色A2：红色A3：绿色

问题2：多少？ A1：1 A2：2 A3：3

因此，如果我选择第一个问题为A1而第二个问题为A3，则在同一页面中，结果将在单个文本框中显示如下：

蓝色

3

希望这有道理吗？

我已经在论坛和整个谷歌上查了一下，但无法找到答案。

如果有人能帮我指出正确的方向，我将非常感激。

非常感谢

Answer 1

假设这些问题在同一页面上，您就会有这样的标记：

<div class="question"> 
   <span>What color? </span>
   <!--radio buttons -->
</div>
<div class="question"> 
   <span>How many ? </span>
   <!--radio buttons -->
</div>

这是JS。您必须在change元素上收听type=radio事件。 if循环用于检查两个单选按钮是否都已选中。这很重要，因为如果没有选中，您将获得undefined尚未选择的其中一个选项。

$(".question").on("change", "input[type=radio]", function () {
    var color = $("[name=color]:checked").val();
    var count = $("[name=count]:checked").val();
    if (color.length && count.length) {
        $("#results").val(color + " : " + count);
    }
});

#results将包含所选选项的结果。

演示：http://jsfiddle.net/hungerpain/88LTQ/

编辑1 对于多行输出，您必须使用textarea。并改变

$("#results").val(color + " : " + count);

到

 $("textarea").html(color + " \n " + count);

更新了演示：http://jsfiddle.net/hungerpain/88LTQ/1/

编辑2 要获得默认值，即使没有选择任何内容，也需要一些更多的变量，它们采用单选按钮组的第一个值。

var colorDefault = $("[name=color]:first").val();
var countDefault = $("[name=count]:first").val();

然后，从无线电中获取checked值：

var color = $("[name=color]:checked").val();
var count = $("[name=count]:checked").val();

然后，检查radios是null / undefined

color = !color ? colorDefault : color;
count = !count ? countDefault : count;

然后将其附加到textarea

$("textarea").html(color + " \n " + count);

所以，你的JS看起来像这样：

$(".question").on("change", "input[type=radio]", function () {
    var colorDefault = $("[name=color]:first").val();
    var countDefault = $("[name=count]:first").val();
    var color = $("[name=color]:checked").val();
    var count = $("[name=count]:checked").val();
    color = !color ? colorDefault : color;
    count = !count ? countDefault : count;

    $("textarea").html(color + " \n " + count);
 });

演示：http://jsfiddle.net/hungerpain/88LTQ/3/

Answer 2

看看这个。最重要的关键字是“：checked”，因此您可以在其组员中过滤掉选中的单选按钮:) http://jsfiddle.net/m9p5n/

HTML

<input type="radio" value="blue" name="color">A1</input>
<input type="radio" value="red" name="color">A2</input>
<input type="radio" value="green" name="color">A3</input>
<br />
<input type="radio" value="1" name="number">A1</input>
<input type="radio" value="2" name="number">A2</input>
<input type="radio" value="3" name="number">A3</input>
<br />
<br />
<input type="text" id="singleline_result" />
<textarea id="multiline_result"></textarea>

JQUERY

$('input[name="color"], input[name="number"]').change(function () {
   $('#singleline_result').val(
       $('input[name="color"]:checked').val() + 
       ' ' +
       $('input[name="number"]:checked').val()
   );

   $('#multiline_result').val(
       $('input[name="color"]:checked').val() + 
       "\n" +
       $('input[name="number"]:checked').val()
   );
});

我使用了两个输入框以防万一，所以代码更长。

将可变单选按钮结果添加到单个文本框中

2 个答案: