Question

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

我无法使用正常<asp:CheckBox> input:type = checkbox的{{1}}来实现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可见的条件等），并想要引用checked的当前CheckBox状态，只需在此处执行此操作你的change()功能：

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

注意：为了将来的兼容性，使用prop()函数而不是attr()非常重要。这里的差异很微妙，但attr()会在首次加载到页面时返回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函数，为了从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>

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

3 个答案: