asp.net - ASP :RadioButtonList and jQuery to show hide a panel

Question

我有一个名为 rblDependants 的 asp:RadioButtonList其呈现如下和面板 pnlDependants ，我需要在单选按钮选择为“否”时隐藏它，并在单选按钮选择为"is"时显示它。我已经尝试了论坛上的一些片段，但似乎没有一个能正常工作。任何人都可以帮助我吗......!

  <table id="ctl00_ContentPlaceHolder1_ctl02_rblDependants"  border="0" style="border-width:0px;">
        <tr>
            <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="Yes" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0">Yes</label></td>
        </tr><tr>
            <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="No" checked="checked" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1">No</label></td>
        </tr>
</table>

<div id="ctl00_ContentPlaceHolder1_ctl02_pnlDependants">

                    <div class="QuestionWrapper">

                        <div class="Question">
                            <label for="">No. of Dependants</label>
                        </div>
                        <div class="Answer">
                            <input name="ctl00$ContentPlaceHolder1$ctl02$txtNoOfDependants" type="text" maxlength="2" id="ctl00_ContentPlaceHolder1_ctl02_txtNoOfDependants" />
                        </div>
                        <div class="ClearFloat"></div>
                    </div>

Answer 1

这样的事情应该有效:

​$("table[id$=_rblDependants] :radio").change(function() {
    $(this).closest('table').next().toggle(this.checked && this.value == 'Yes');
})​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.change()​;​

这适用于任意数量的重复控件，因为它找到 <div id="X_pnlDependants">相对地。我们所做的一切都是通过 <table>谁的 ID ends-with _rblDependants ，取任何 :radio 其中的按钮并绑定(bind)到其 .change() 事件。然后更改其中任何一个，检查结果是否为 value="Yes"它是 .checked ，如果是这种情况则显示面板，否则隐藏它，通过 .toggle(bool) .

.closest() 和 .next() 是去<table>然后到下一个元素，<div> ，因为这就是您想要隐藏/显示的内容。 .change() 最后是最初触发处理程序，因此如果最初选中“否”，它将隐藏 <div>加载中。

You can give it a try here