如果在表单中检查radiobutton,如何折叠部分

时间:2013-09-26 21:42:09

标签: jquery html ajax asp.net-mvc-4 twitter-bootstrap

我很想知道在检查下面的单选按钮时如何折叠div部分

我想要检查折叠部分的Radiobutton

<div>
    @Html.RadioButtonFor(model => model.Transaction.PaymentProvider, "2")
    @Html.LabelFor(model => model.Transaction.PaymentProvider, "Pay with Credit Card")
</div>

如果检查上面的Radiobutton,我想崩溃的部分

<div class="panel-body">
    <table border="0" cellspacing="0" cellpadding="0" align="middle">
        <tr>
            <td width="100" border="0" class="paylabel">Card Number:</td>
            <td colspan="3" width="335" border="0" class="paylabel">
                <div class="editor-field">
                    @Html.EditorFor(model => model.Transaction.CreditCard.CardNumber)
                    @Html.ValidationMessageFor(model => model.Transaction.CreditCard.CardNumber)
                </div>
            </td>
        </tr>
    </table>
</div>

我正在使用bootstrap并尝试过手风琴类,但只适用于超链接而且我不知道如果检查了radiobutton然后decollapse

如何制作条件
<label class="radio">
<input checked="checked" data-val="true" data-val-number="The field PaymentProvider must be a number." data-val-required="The PaymentProvider field is required." id="Transaction_PaymentProvider" name="Transaction.PaymentProvider" type="radio" value="1"/>
<label for="Transaction_PaymentProvider">Pay with PayPal</label>
 <input id="Transaction_PaymentProvider" name="Transaction.PaymentProvider" type="radio" value="2" />
<label for="Transaction_PaymentProvider">Pay with Credit Card</label>
 </label>

这是从IE

调试的代码

1 个答案:

答案 0 :(得分:1)

使用此处的信息jQuery click event on radio button doesn't get fired

$("input[name=Transaction_PaymentProvider]").click(function(){
    if($('input:radio[name=Transaction_PaymentProvider]:checked').val() == "2"){
        $('.panel-body').show();
    }else{
        $('.panel-body').hide();
    }
}

您需要查看为单选按钮生成的名称。我不记得名字是不是。要么 _。 http://api.jquery.com/show/http://api.jquery.com/hide/会介绍您可以自定义效果的方法。希望这会有所帮助。