Question

我有两个复选框：在Panel1中，如果选中所有复选框，我需要显示Panel2。我有一个HTML和一个脚本，但它不起作用，我认为我错过了一些东西。这是我的代码：

<body>
<asp:Panel ID="Panel1" runat="server">
    <table>
        <tr>
            <td>
                <asp:Label ID="Title" runat="server" Text="Enter the Title"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Question1" runat="server" Text="Question1"></asp:Label>
            </td>
            <td>
                <asp:CheckBox ID="CheckBox1" name="cb" runat="server" Checked="false" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Question2" runat="server" Text="Question2"></asp:Label>
            </td>
            <td>
                <asp:CheckBox ID="CheckBox2" name="cb" runat="server" Checked="false" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Question3" runat="server" Text="Question3"></asp:Label>
            </td>
            <td>
                <asp:CheckBox ID="CheckBox3" name="cb" runat="server" Checked="false" />
            </td>
        </tr>
    </table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
    <table>
        <tr>
            <td>
                <asp:Label ID="Question4" runat="server" Text="Question4"></asp:Label>
            </td>
            <td>
                <asp:CheckBox ID="CheckBox4" runat="server" Checked="false" />
            </td>
        </tr>
    </table>
</asp:Panel>
<table>
    <tr>
        <td>
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
        </td>
    </tr>
</table>

这是我的剧本，但它不起作用

$(document).ready(function () { 
$('#CheckBox1').removeAttr('checked');
$('#CheckBox2').removeAttr('checked');
$('#CheckBox3').removeAttr('checked');
$('#CheckBox4').removeAttr('checked');  
$('#Panel2').hide(); 
$('#Panel1').change(function () { 
if (this.checked) { 
$('#Panel2').show(); 
} 
else { 
$('#Panel2').hide(); 
} 
}); 
});

请帮助

Answer 1

使用jQuery，您可以将选中的复选框与Panel1中的所有复选框进行比较，如下所示：

if($("#Panel1 input[type=checkbox]:checked").length === $("#Panel1 input[type=checkbox]").length){
    $('#Panel2').show(); 
}else{
    $('#Panel2').hide(); 
}

检查Panel1中是否选中All复选框以显示Panel2

1 个答案: