使用JQuery在RadioButtonList上隐藏/显示面板时出现问题

1） 我在我的页面上有一个下拉列表，包括选项“信用卡”和“发票/直接账单”。在选择“发票/直接账单”时，我只需选择“信用卡”即可： 2） 我必须显示/隐藏radiobuttonlist（在一个面板中：Panel2），它有3个选项（签入日期、预订日期、其他日期） 3） 如果我点击radiobuttonlist的“其他日期”选项，我必须显示一个文本框，它位于一个面板内：Panel3。 4） 如果我点击radiobuttonlist的“签入日期”或“预订日期”选项，我必须隐藏Panel3内的文本框

我的4个场景都正常工作。 问题是： 如果我在dropdownlist中选择“信用卡”，在我的RadioButton列表中选择“其他日期”选项，在我的文本框中输入值“10”，然后单击submit按钮，则发生回发，我的值存储在DB中。 重新加载页面时： 我在下拉列表中看到“信用卡”，在单选按钮列表中看到“信用卡”选项，但值为15的文本框不可见。当我选择“入住日期”/“预订日期”然后选择“其他日期”时，我看到值为15的文本框。代码如下：

<script type="text/javascript">
$(function () {
    $('select[id$=ddlCardType]').change(function () {
        if (this.value == -1) {
            $('div[id$=Panel1]').show();
            $('div[id$=Panel2]').hide();
            $('div[id$=Panel3]').hide();
        }
        else {
            $('div[id$=Panel1]').hide();
            $('div[id$=Panel2]').show();
        }
    }).change();

});
</script>
<script type="text/javascript">
$(document).ready(function () {
    var panel = $("#Panel3");
    var cbo = $("#Panel2").find("cboVisibility");
    $("#cboVisibility").find('input:radio').change(function (index) {
        //$("#Panel2 cboVisibility").find('input:radio').change(function (index) {
        //$("[id*=pnl2 cboVisibility input:radio]").change(function (index) {
        if ($(this).val() == "OD")
            panel.show();
        else
            panel.hide()
    });
    $('#cboVisibility').find('input:radio').trigger('change');
});
</script>
<asp:DropDownList ID="ddlCardType" runat="server" CssClass="arial11nr" Width="270px">
    <asp:ListItem Value="-1">Invoice/Direct Bill</asp:ListItem>
    <asp:ListItem Value="SUCC">Credit Card</asp:ListItem>
</asp:DropDownList>
<td align="left" valign="top">
    <asp:Panel ID="Panel1" runat="server" Style="display: none;">
        <strong>Billing Instructions/Notes</strong><span class="red-color">(optional)  
</span>
        <asp:TextBox ID="txtBillingInstructions" runat="server" TextMode="MultiLine">
 </asp:TextBox>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Style="display: none;" ClientIDMode="Static">
        <asp:RadioButtonList ID="cboVisibility" CssClass="Normal" runat="server" 
 RepeatDirection="Vertical"
            ClientIDMode="Static">
            <asp:ListItem Value="CD" Selected="True">Check-In Date</asp:ListItem>
            <asp:ListItem Value="BD">Book Date</asp:ListItem>
            <asp:ListItem Value="OD">Other Date</asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" Style="display: none;" ClientIDMode="Static">
        <strong>Charge</strong>
        <asp:TextBox ID="txtSUCCValidity" runat="server" ClientIDMode="Static" 
Width="50px"></asp:TextBox>
        <strong>Days Before Check-In</strong>
        <asp:RangeValidator ID="RangeValidator1" runat="server" 
ControlToValidate="txtSUCCValidity"
            ErrorMessage="<br />Not valid Range" MaximumValue="999"  
ValidationGroup="update"
            MinimumValue="0" Type="Integer" Display="Dynamic"></asp:RangeValidator>
    </asp:Panel>
</td>

$（函数（）{
$（'select[id$=ddlCardType]'）。更改（函数（）{
如果（this.value==-1）{
$（'div[id$=Panel1]'）。show（）；
$（'div[id$=Panel2]'）。hide（）；
$（'div[id$=Panel3]'）。hide（）；
}
否则{
$（'div[id$=Panel1]'）。hide（）；
$（'div[id$=Panel2]'）。show（）；
}
}).change（）；
});
$（文档）.ready（函数（）{
var面板=$（“#面板3”）；
var cbo=$（“#Panel2”）.查找（“CBOviability”）；
$（“#cbovibility”）.find（'input:radio'）.change（函数（索引）{
//$（“#Panel2 cbovibility”）.find（'input:radio'）.change（函数（索引）{
//$（“[id*=pnl2 C可用性输入：无线电]”）。更改（功能（索引）{
如果（$（this.val（）=“OD”）
panel.show（）；
其他的
panel.hide（）
});
$（'cbovibility'）。查找（'input:radio'）。触发（'change'）；
});
发票/直接帐单
信用卡
账单说明/备注（可选）
登记日期
预订日期
其他日期
充电
入住前几天

---

希望您能提供帮助。您看到的行为是有意义的。默认情况下，panel2是隐藏的。只有当单选按钮触发了更改事件并且该更改也选择了第三个选项时，您的js代码才会显示该面板。当您在提交表单后加载页面时，单选按钮在文档已准备就绪。即，在可以订阅更改事件之前。这就是默认情况下您看不到文本框的原因

启用场景需要更改什么，这取决于您如何设置单选按钮的值

一种解决方案是在文档就绪时触发更改事件

$(document).ready(function () {
    var panel = $("#Panel2");
    var cbo = $("#Panel1").find("cboVisibility");
    $("#cboVisibility").find('input:radio').change(function (index) {

        // when triggering a change across all radio inputs, even 
        // those that are not selected will show up here. 
        // hence the check to verify if they are actually selected. 
        if (this.value == "OD" && this.checked) {  
            panel.show();

        // we wand to hide the panel3 only if an option other
        // than "OD" is selected.
        } else if (this.checked) {
            panel.hide(); 
        }
    });

    // this will trick the browser into thinking that you selected the third option
    $('#cboVisibility').find('input:radio').trigger('change');
});

var面板=$（“#面板3”）；
var cbo=$（“#Panel2”）.查找（“CBOviability”）；
$（文档）.ready（函数（）{
//var-ddlCardType=“”；
如果（$（'[id*=ddlCardType]>选项：选中'）。val（）==“成功”&&
$（'[id*=Cboviability]：选中'.val（）=“OD”）{
panel.show（）；
}
});
$（'select[id$=ddlCardType]'）。更改（函数（）{
如果（this.value==-1）{
$（'div[id$=Panel1]'）。show（）；
$（'div[id$=Panel2]'）。hide（）；
$（'div[id$=Panel3]'）。hide（）；
}
否则{
$（'div[id$=Panel1]'）。hide（）；
$（'div[id$=Panel2]'）。show（）；
如果（$（'[id*=Cboviability]：选中“）.val（）=“OD”）
panel.show（）；
}
}).change（）；
$（“#cbovibility”）.find（'input:radio'）.change（函数（索引）{
//$（“#Panel2 cbovibility”）.find（'input:radio'）.change（函数（索引）{
//$（“[id*=pnl2 C可用性输入：无线电]”）。更改（功能（索引）{
如果（$（this.val（）=“OD”）
panel.show（）；
其他的
panel.hide（）
});

Amith George:如果我这样做，那么面板2的内容将显示在：选择radiobutton的“是”/“否”选项，以及我在dropdownlist中选择“B”时，这不是我的要求。要求：只有在dropdownlist中选择“A”和“无”时，面板2才应可见根据您发布的代码在RadioButtonList中选择，如果用户单击是/否，$（this）.val（）的值将为“CD”或“BD”，而不是“OD”。仅当值为“OD”时才会显示面板。如果您的行为与此不同，我建议您发布实际使用的代码。我所做的唯一更改是在页面加载时触发更改事件。如果您仔细考虑，这不应影响任何其他行为。最好创建一个JSFIDLE（）只有html/css/js。这样我们两个都会在同一个页面上，没有双关语。Amith George：我刚刚发布了最初的地区代码。请看一看。Amith George，我已经根据代码编辑了描述。请看一看。

<script type="text/javascript">
var panel = $("#Panel3");
var cbo = $("#Panel2").find("cboVisibility");

$(document).ready(function () {
    //var ddlCardType = "<%=ddlCardType.ClientID %>";
    if ($('[id*=ddlCardType]>option:selected').val() == "SUCC" &&    
$('[id*=cboVisibility] :checked').val() == "OD") {
        panel.show();
    }
});


$('select[id$=ddlCardType]').change(function () {
    if (this.value == -1) {
        $('div[id$=Panel1]').show();
        $('div[id$=Panel2]').hide();
        $('div[id$=Panel3]').hide();
    }
    else {
        $('div[id$=Panel1]').hide();
        $('div[id$=Panel2]').show();
        if ($('[id*=cboVisibility] :checked').val() == "OD")
            panel.show();
    }
}).change();



$("#cboVisibility").find('input:radio').change(function (index) {
    //$("#Panel2 cboVisibility").find('input:radio').change(function (index) {
    //$("[id*=pnl2 cboVisibility input:radio]").change(function (index) {
    if ($(this).val() == "OD")
        panel.show();
    else
        panel.hide()
});