jQuery使用单选按钮隐藏显示一些信息
Hide to Show some information jQuery using Radio Button
我想使用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/
相关文章:
- Jquery on单击“显示信息”
- 如何在完整日历中的当天点击时显示活动详细信息
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 谷歌地图-数据库中的标记只显示最后一行的信息
- 谷歌地图信息窗口为每个标记显示相同的内容
- Cartodb信息窗口未在地图上显示变量
- jquery Ajax没有;不要显示任何信息(既不显示成功也不显示失败)
- 地图标记信息不显示
- Json阵列的详细信息显示在三页的angularjs中
- 如何创建multiselect来显示Django中每个选定项的详细信息
- 如何在显示多个标记时单击另一个标记时关闭信息窗口
- 数据应该只显示与我单击的按钮有关的信息
- 谷歌地图API-信息窗口显示谷歌位置API信息
- 在knocket js中显示json对象的详细信息
- 在 AngularJS 中显示信息的标记存在问题
- Google 地图信息窗口仅显示首次点击时的信息
- jQuery基于下拉信息显示信息
- 使用谷歌地图过境信息显示旅行时间
- 根据用户信息显示不同的图像
- 点击里面的点击功能导致警告信息显示不止一次- Jquery/Javascript