如何使用复选框切换面板的可见性

How can I toggle a panel's visibility using a CheckBox?

本文关键字：可见性 何使用 复选框      更新时间：2023-09-26

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

我无法使用具有正常input:type = checkbox <asp:CheckBox>访问 JavaScript 函数。但我需要它成为一个<asp:CheckBox>！

如果我

理解正确，我会亲自使用 jquery，那么你可以做这样的事情

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

假设您的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首次加载到页面上时的状态。 prop()将返回CheckBox的当前状态。

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

只需调用javascript函数，为了从javascript访问 asp.net 控件，应该使用style属性使其不可见，因为如果使用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>
相关文章：