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

Question

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

我试图做到的，是得到一个选择单选按钮，结果在一个文本框中回答不使用PHP，所以：

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

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

所以，如果我选择的第一个问题是A1，然后第二个作为A3在同一个页面的结果将是这样一个单一的文本框：

蓝色

希望这有意义吗？

我看过论坛和谷歌遍寻，但无法找到答案。

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

千恩万谢

Answer 1

假设这些问题是在同一页上，你有这样的标记：

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

这里的JS。您将不得不听type=radio元素上的change事件。 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/

EDIT 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

看看这个。最重要的关键词是 “：检查” 这样你就可以将其组员:) 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() 
    ); 
}); 

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