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

【问题标题】：How can I toggle a panel's visibility using a CheckBox?如何使用 CheckBox 切换面板的可见性？
【发布时间】：2011-12-19 00:03:20
【问题描述】：

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

我无法使用 <asp:CheckBox> 和普通的 input:type = checkbox 访问 JavaScript 函数，它可以正常工作。但我需要它是<asp:CheckBox>！

【问题讨论】：

jquery 会代替 javascript 为你工作吗？
是 'panel' 和 asp:Panel 还是只是和标准 div？另外，您使用的是 jQuery 还是纯 javascript？
jquery 可以正常工作！面板是 asp:Panel !

标签： javascript asp.net checkbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

注意：为了将来的兼容性，使用prop() 函数而不是attr() 很重要。这里的区别是微妙的，但attr() 将返回CheckBox 首次加载到页面时的状态。 prop() 将返回 CheckBox 的当前状态。

【讨论】：

关于 prop() 的使用很有趣。您有更多详细信息的参考吗？谢谢
@Russell jQuery 网站上.prop() 下的注释提到了更改。

【解决方案3】：

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>

【讨论】：