如何使用CheckBox切换面板的可见性？

Question

我有一个<asp:CheckBox> ，我需要对其应用JavaScript调用。 如果选中CheckBox则JavaScript函数应将<asp:Panel>的可见性设置为true。 如果未选中CheckBox ，则面板的可见性应为false。

我无法使用<asp:CheckBox>和正常的input:type = checkbox来访问它的JavaScript函数。 但是我需要它成为<asp:CheckBox> ！

Answer 1

如果我理解正确，我会亲自使用jquery，那么您可以执行以下操作

    $("#yourCheckBoxId").change(function(){
       if($(this).attr('checked')){
          $(".yourDivClass").show();
       }
    });

Answer 2

假设您的CheckBox具有runat="server"属性，则需要执行以下操作：

$("<%= MyCheckBox.ClientID %>").change(function () {
    $("<%= MyPanel.ClientID %>").toggle();
});

上面的代码假定您的CheckBox和Panel始终具有相同的状态。 也就是说， checked CheckBox等于可见的Panel 。 如果您需要修改此代码（更改Panel可见的条件等），并且想要引用CheckBox的当前checked状态，只需在change()函数中执行以下操作：

var checked = $(this).prop("checked");

注意：为了将来的兼容性，使用prop()函数代替attr() 。 此处的区别很细微，但是attr()将在CheckBox 首次加载到页面上时返回CheckBox的状态。 prop()将返回CheckBox的当前状态 。

Answer 3

function toggle_panel(chkbox)
{
    var panel=document.getElementById('<%=panle1.ClientID %>');
    chkbox.checked ? panel.style.display='inline':panel.style.display='none';
}  

只需调用javascript函数，就可以使用style属性将其从javascript中访问为一个asp.net控件，因为如果使用Visible =“ false”，则javascript将返回undefined。

<asp:CheckBox ID="chkboxPanel" runat="server" onclick="toggle_panel(this);" Text="Show" />
    <br />
    <br />
    <asp:Panel ID="panle1" runat="server" Style="display: none">
        Iam Text Inside the Panel
    </asp:Panel>