1

我想使用 jQuery 根据单选按钮显示不同的信息。

当我选择任何支付处理器时，我想在右侧显示相关的支付方式信息。

因此，当我选择任何按钮时，会显示与该支付处理器相关的信息，同时隐藏与其他支付处理器相关的信息。

这是我的 HTML 表单：

<form class="form-horizontal" action="<?php base_url(); ?>confirm_order" method="post">
    <fieldset>

        <div class="span4">
<!-- Left Side -->
            <input type="radio" checked="checked" name="paypal">Paypal<br/>
            <input type="radio" name="cart">Visa, Master Card, etc<br/>
            <input type="radio" name="cash_on_delevary">Cash on Delivery
<!-- End Left Side -->
        </div>
        <div class="span4">
            <!-- Right Side -->
            <div class="control-group" id="paypal">
                <label class="control-label" >Paypal Payment</label>
            </div>

            <div class="control-group" id="Cart">
                <label class="control-label" >Cart</label>
            </div>

            <div class="control-group" id="cash_on_delevary">
                <label class="control-label" >Cash on Delevary</label>
            </div>
            <!-- end Right Side -->
        </div>

        <input type="submit" name="Continue" class="btn btn-orange pull-right">
    </fieldset>
</form>

我能做些什么？

4

2 回答 2

4

这将起作用：

$("input[type='radio']").change(function() {
    $(".control-group").hide();
    $("#" + this.name).show();
});
于 2013-06-05T18:39:26.277 回答
1

如果您想让单选按钮工作，您需要为它们分配相同的名称，否则当您选择 1 时，其他人不会取消选择。

您应该做的是在元素上分配数据以了解它们显示的部分：

<input type="radio" data-for='paypal' checked="checked" name="payment">Paypal<br/>
<input type="radio" data-for='Cart' name="payment">Visa, Master etc<br/>
<input type="radio" data-for='cash_on_delevary' name="payment">Cash on Delevary

然后你绑定更改事件：

$("input[name=payment]").change(function() {
    $(".control-group").hide();
    $("#" + $(this).data("for")).show();
});

但是要在开始时隐藏每个部分，您需要添加以下内容：

$(".control-group").hide();
$("input[name=payment]:checked").trigger('change')

这是一个小提琴：http: //jsfiddle.net/a9Fvn/

于 2013-06-05T18:49:52.467 回答