Question

我想使用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>

我该怎么办？

Answer 1

这将有效：

$("input[type='radio']").change(function() {
    $(".control-group").hide();
    $("#" + this.name).show();
});

Answer 2

如果您希望radiobutton工作，您需要为它们指定相同的名称，否则当您选择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/

隐藏使用单选按钮显示一些信息jQuery

2 个答案: