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

Question

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

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

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

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

因此，如果我将第一个问题选为 A1，将第二个问题选为 A3，那么在同一页面中，单个文本框中的结果将如下所示：

蓝色的

3

希望这是有道理的？

我在论坛和谷歌上都看过，但找不到答案。

如果有人能帮助我指出正确的方向，我将不胜感激。

非常感谢

Answer 1

have a look at this. The most important keyword is the ":checked" so you can filter out the checked radio button among its groupmates :) 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()
   );
});

I used two input boxes just in case, so the codes are longer.

Answer 2

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

<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/