使用 asp.net 复选框 oncheckchanged 事件隐藏 div答案

【问题标题】：Hiding a div using a asp.net checkbox oncheckchanged event使用 asp.net 复选框 oncheckchanged 事件隐藏 div
【发布时间】：2011-12-09 23:14:43
【问题描述】：

我正在尝试使用 asp.net 复选框服务器控件隐藏 div。我为服务器控件添加了一个 onclick javascript 代码，但它似乎不起作用....有什么建议吗？

    function hideDiv(obj) {

        if (obj.checked==true) {
            document.getElementById("divMap").style.visibility=true
        }
        else {
            document.getElementById("divMap").style.visibility = false
        }
    }

【问题讨论】：

标签： javascript asp.net checkbox

【解决方案1】：

function hideDiv(obj) {
    if (obj.checked==true) {
        document.getElementById("divMap").style.display='block';
    }
    else {
        document.getElementById("divMap").style.display = 'none';
    }
}

或者你可以使用jquery

function hideDiv(obj) {
    if (obj.checked) {
        $("#divMap").show();
    }
    else {
        $("#divMap").hide();
    }
}

【讨论】：

怎么能放到asp.net中呢？

【解决方案2】：

尝试使用下面的代码代替

document.getElementById("divMap").style.visibility = false
document.getElementById("divMap").style.visibility=true  




document.getElementById("divMap").style.display='none'
     document.getElementById("divMap").style.display='block'

【讨论】：

【解决方案3】：

这也可以在服务器端实现。

标记：

<asp:CheckBox id="chk" runat="server" AutoPostBack="true" />
<div id="div" runat="server"></div>

C#：

protected void chk_CheckedChanged(object sender, System.EventArgs e)
{
    switch ((sender.checked)) {
        case true:
            div.Visible = false;
            break;
        case false:
            div.Visible = true;
            break;
    }
}

【讨论】：

【解决方案4】：

要在 asp.net 中访问和使用服务器端控件，您必须使用它的客户端 ID (ClientID) 属性。

function hideDiv(obj) {

    if (obj.checked==true) {
        document.getElementById("<%=YourControlID.ClientID %>").style.visibility=true
    }
    else {
        document.getElementById("<%=YourControlID.ClientID %>").style.visibility = false
    }
}

【讨论】：

【解决方案5】：

从 javascript 用户“”对服务器控件执行操作

 function hideDiv(obj) {

        if (obj.checked==true) {
            document.getElementById('<%= divMap.ClientID%>').style.display = 'Block';
        }
        else {
            document.getElementById('<%= divMap.ClientID%>').style.display = 'None';
        }
    }

【讨论】：