-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 - 大米
  • #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>
4

2 回答 2

3

关联

$('.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-18T14:26:20.943 回答
1

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-18T14:36:54.173 回答