Question

如果我在普通页面（例如Default.aspx）中使用它，此代码可以正常工作。我想在UserControl中使用它。

我该怎么做？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Check/Uncheck All CheckBoxes Using JQuery</title>

    <script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#chkAll').click(
             function() {
                 $("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
             });
         });    

     </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />

        <asp:CheckBoxList ID="cbList" runat="server">
        </asp:CheckBoxList>

    </div>
    </form>
</body>
</html>

Answer 1

当放置在用户控件中时，复选框具有不同的客户端ID，前面是用户控件的ID。尝试按如下方式修改jQuery：

$(document).ready(function() {
   $('#<%=chkAll.ClientID %>').click(
    function() {
        $("INPUT[type='checkbox']").attr('checked', $('#<%=chkAll.ClientID %>').is(':checked'));
    });
});

Answer 2

创建启用脚本的UserControls有很多复杂性，例如： ASP.NET - JQuery

通常：您需要使脚本命名容器安全。需要通过DOM ID引用ASP.NET客户端ID（@ FarligOpptredn的答案），或者使用CSS选择器（除非您创建的功能特定于实例）。

理想情况下，在JS文件中创建所有客户端脚本，并使用ScriptManager从代码隐藏中注册它。这允许重用脚本并避免UserControl实例之间的冲突。由于您无法在JS文件中使用scriptlet（<%= ... %>），而是使用参数来引用UserControl DOM中的对象，或使用CSS选择器。并在事件中使用this而不是硬参考。实施例

myUserControl.js：

 $(document).ready(function() {
            $('.myUserControl > .chkAll').click(
             function() {
                 $("INPUT[type='checkbox']").attr('checked', $(this).is(':checked'));
             });
         });

myUserControl.ascx：

<div class="myUserControl">

    <asp:CheckBox ID="chkAll" class="chkAll" runat="server" Text="Check All" /><br />

    <asp:CheckBoxList ID="cbList" runat="server">
    </asp:CheckBoxList>

</div>

与使用大量转义的内联脚本相比，这将使您的脚本更易于阅读和调试。

创建UserControls

2 个答案: