單擊按鈕時更改輸入字段的值

-1

我有一組用戶可單擊的單選按鈕。每個單選按鈕應該能夠根據用戶選擇的按鈕來填充4個具有不同值的輸入字段。在我的情況單擊按鈕時更改輸入字段的值

選項1
選項2
選項3倍

的單選按鈕的值應當對應於以下輸入字段值（請注意我添加了選項1倍的值作爲默認輸入字段看到JSFIddle）

選項1

#inputValueA =選項1 - 藍
#inputValueB =選項1 - 紅色
#inputValueC =選項1 - 黃色
#inputValueD =選項1 - 綠色

選項2

#inputValueA =選項2 - 汽車
#inputValueB =選項2 - 總線
#inputValueC =選項2 - 列車
#inputValueD =選項2 - 自行車

選項3

#inputValueA =選項3 - 蛋糕
#inputValueB =選項3 - 糖
#inputValueC =選項3 - Rice
#inputValueD =選項3 - 啤酒

我所尋找的是，試圖得到幫助，找出javascript寫來填充不同的輸入單選按鈕是基於每次按字段以上的值。

我在這裏創建了一個JSFiddle以查看演示。

我的代碼是

<!-- Radio Buttons --> 
<div data-toggle="buttons-radio"> 
    <button id="Option1" type="button" class="btn btn-primary active">Option 1</button> 
    <button id="Option2" type="button" class="btn btn-primary">Option 2</button> 
    <button id="Option3" type="button" class="btn btn-primary">Option 3</button> 
</div> 

<!-- Input Button 1 --> 
<div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span> 
    <input id="inputValueA" type="text" value="Option 1 - Blue" name=""> 
</div> 

<!-- Input Button 2 --> 
<div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span> 
    <input id="inputValueB" type="text" value="Option 1 - Red" name=""> 
</div> 

<!-- Input Button 3 --> 
<div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span> 
    <input id="inputValueC" type="text" value="Option 1 - Yellow" name=""> 
</div> 

<!-- Input Button 4 --> 
<div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span> 
    <input id="inputValueD" type="text" value="Option 1 - Green" name=""> 
</div>

來源

2013-05-18 Redwall

他們不是單選按鈕 – PSR

有沒有的JavaScript在的jsfiddle所以很難說是什麼問題。或者你只是要求有人爲你寫代碼？ – Pointy

@PSR，是的，他們根據Twitter Bootstrap http://twitter.github.io/bootstrap/javascript.html#buttons – Redwall

http://jsfiddle.net/fkH6c/

$(function() { 
    var values = [ 
     ['Blue', 'Red', 'Yellow', 'Green'], 
     ['Car', 'Bus', 'Train', 'Bike'], 
     ['Cake', 'Sugar', 'Rice', 'Beer'], 
    ]; 

    $('.btn-primary').on('click', function() { 
     var index = $(this).index(); 

     for (var i = 0; i < 5; i++) { 
      $('#inputValue' + 'ABCD'[i]).val('Option ' + (index+1) + ' - ' + values[index][i]); 
     } 
    }); 
});

來源

2013-05-18 14:36:54

這是更好，非常感謝 – Redwall

LINK

$('.btn-primary').click(function(){ 
if($(this).text() =="Option 1"){ 
    $('#inputValueA').val('Option 1 - Blue') 
    $('#inputValueB').val('Option 1 - Red') 
    $(' #inputValueC').val('Option 1 -Yellow'); 
    $('#inputValueD').val('Option 1 - Green') 
} 
else if($(this).text() =="Option 2"){ 
    $('#inputValueA').val('Option 2 - Car') 
    $('#inputValueB').val('Option 2 - Bus') 
    $(' #inputValueC').val('Option 2 - Train'); 
    $('#inputValueD').val('Option 2 - Bike') 
} 
else{ 
    $('#inputValueA').val('Option 3 - Cake') 
    $('#inputValueB').val('Option 3 - Sugar') 
    $(' #inputValueC').val('Option 3 - Rice'); 
    $('#inputValueD').val('Option 3 - Beer') 
}});

來源

2013-05-18 14:26:20 PSR

，只要它讓我接受！ – Redwall

歡迎您 – PSR

是的，上面的答案比我的答案好 – PSR

單擊按鈕時更改輸入字段的值

回答

相關問題