添加可變單選按鈕結果到單個文本框

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() 
    ); 
}); 

我用了兩個輸入以防萬一，所以代碼更長。