Question

我有一组用户可以点击的单选按钮。每个单选按钮应该能够根据用户选择的按钮填充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 - 赖斯
#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>

Answer 1

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

Answer 2

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

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

2 个答案: