单击按钮时更改输入字段的值

-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

单击按钮时更改输入字段的值

回答

相关问题