使用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();");
            }
    }

- bsivel

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>

- Mateus Schneiders

---

Mt Schneiders - 我尝试了你提出的两个建议，但都没有起作用。不确定接下来该尝试什么。 - bsivel

在IE中，我遇到了JavaScript运行时错误：无法获取未定义或空引用的属性“checked”。Chrome不会引发错误。 - bsivel

Answer 2

尝试一下这个

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

- Aarif Qureshi

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事件上。

- afzalulh