我想使用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>
我能做什么?
可以:
$("input[type='radio']").change(function() {
$(".control-group").hide();
$("#" + this.name).show();
});
如果你想让单选按钮工作，你需要给它们分配相同的名称，否则当你选择1时，其他的不会取消选择。
你应该做的是分配一个data on元素来知道他们显示的是哪个section:
<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/