javascript - 使用 Javascript 处理 OnCheckedChanged 复选框事件

Question

我有以下 javascript 函数，我想在选中或取消选中复选框时调用它：

    <script language="javascript" type="text/javascript">
    function showHideDropDowns() {
        var check = document.getElementById('<%= cbShowHideDDLs %>')
        if (check.checked) {
            document.getElementById('<%=ddlVendor%>').style.visibility = 'visible';
            document.getElementById('<%=ddlItem%>').style.visibility = 'visible';
            document.getElementById('<%=ddlorigin%>').style.visibility = 'visible';

            document.getElementById('<%=tbVendor%>').style.visibility = 'hidden';
            document.getElementById('<%=tbItems%>').style.visibility = 'hidden';
            document.getElementById('<%=tbOrigin%>').style.visibility = 'hidden';

        }
        else {
            document.getElementById('<%=ddlVendor%>').style.visibility = 'hidden';
            document.getElementById('<%=ddlItem%>').style.visibility = 'hidden';
            document.getElementById('<%=ddlorigin%>').style.visibility = 'hidden';

            document.getElementById('<%=tbVendor%>').style.visibility = 'visible';
            document.getElementById('<%=tbItems%>').style.visibility = 'visible';
            document.getElementById('<%=tbOrigin%>').style.visibility = 'visible';
        }
    }
    </script>

尝试使用 OnCheckedChanged 或 OnClick 添加和属性无效：

    <asp:CheckBox ID="cbShowHideDDLs" runat="server" Text="Show Lists"  />


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            {
                cbShowHideDDLs.Attributes.Add("onclick", "showHideDropDowns();");
                //cbShowHideDDLs.Attributes.Add("OnCheckedChanged","showHideDropDowns();");
            }
    }

Answer 1

尝试这个：

<asp:CheckBox ID="cbShowHideDDLs" ... onclick="showHideDropDowns(checkbox)" />

如果要在客户端获取 UserControl 元素，则需要使用其 ClientID。因此，将您的 javascript 函数更改为：

<script language="javascript" type="text/javascript">
    function showHideDropDowns(checkbox) {
        if (checkbox.checked) {
        document.getElementById('<%=ddlVendor.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=ddlItem.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=ddlorigin.ClientID %>').style.visibility = 'visible';

        document.getElementById('<%=tbVendor.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=tbItems.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=tbOrigin.ClientID %>').style.visibility = 'hidden';
    }
    else {
        document.getElementById('<%=ddlVendor.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=ddlItem.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=ddlorigin.ClientID %>').style.visibility = 'hidden';

        document.getElementById('<%=tbVendor.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=tbItems.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=tbOrigin.ClientID %>').style.visibility = 'visible';
        }
    }
</script>

Answer 2

尝试这个

 cbShowHideDDLs.Attributes.Add("onclick", "javascript:showHideDropDowns();");

Answer 3

如果你不介意使用 jQuery，你可以这样做：

<script src="Scripts/jquery-2.0.3.js"></script> <%-- Add jQuery reference --%>
<script type="text/javascript">
    $(document).ready(function () {
        $("input:checkbox[name$='cbShowHideDDLs']").click(function () {
            var defvisible = this.checked? 'hidden' : 'visible';
            var defhidden = this.checked ? 'visible' : 'hidden';

            $('#<%=ddlVendor.ClientID %>').css('visibility', defvisible);
            $('#<%=ddlItem.ClientID %>').css('visibility', defvisible);
            $('#<%=ddlorigin.ClientID %>').css('visibility', defvisible);

            $('#<%=tbVendor.ClientID %>').css('visibility', defhidden);
            $('#<%=tbItems.ClientID %>').css('visibility', defhidden);
            $('#<%=tbOrigin.ClientID %>').css('visibility', defhidden);

        });
    });
</script>

并且没有必要将任何功能绑定到复选框的 onclick 上。