c# - 使用javascript选中和取消选中转发器控件中的复选框？

Question

如何使用 javascript 选中和取消选中转发器控件中的复选框？在这里，我无法通过单击选中复选框或在单次选中中取消选中复选框。

我的代码是:

 <asp:Repeater id="repeaterentry" runat="server"  >
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th style="width:10px" align="left"><asp:CheckBox ID="allCheckbox1"   runat="server" /></th>
<th><asp:LinkButton ID="lnkbtn1" runat="server" CommandName="UserName">Name</asp:LinkButton></th>
<th>Password</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:10px"><asp:CheckBox ID="chkContainer" runat="server" /></td>
<td><%#Eval("uname") %> </td>
<td><%#Eval("upass")%> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

jquery :

<script type="text/jscript" language="jscript">
window.onload = function () {
      var $allCheckbox = $('<%= this.repeaterentry.ClientID %>'); // you could use a class here either - depends on you having access to '<%= this.allCheckbox.ClientID %>'
$allCheckbox.change(function () {
    var $table = $allCheckbox.closest('table');
    var $checkboxes = $(':checkbox', $table).not($allCheckbox); // this selector is a bit evil, if you have other checkboxes in the table as well ...
    if ($allCheckbox.is(':checked')) {
        $checkboxes.attr('checked', 'checked');
    }
    else {
        $checkboxes.removeAttr('checked');
    }
});
        }
    }
</script>

Answer 1

更新我的答案

<asp:Repeater id="repeaterentry" runat="server">
    <HeaderTemplate>
        <table border="1" width="100%">
            <colgroup>
                <col style="width: 10px;" />
                <col />
                <col />
            </colgroup>
            <tr>
                <th align="left" class="allCheckbox">
                    <asp:CheckBox ID="allCheckbox1" runat="server" />
                </th>
                <th>
                    <asp:LinkButton ID="lnkbtn1" runat="server" CommandName="UserName">Name</asp:LinkButton>
                </th>
                <th>
                    Password
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td class="singleCheckbox">
                <asp:CheckBox ID="chkContainer" runat="server" />
            </td>
            <td>
                <%#Eval("uname") %>
            </td>
            <td>
                <%#Eval("upass")%>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
</asp:Repeater>

<script type="text/javascript">
    $(function () {
        var $allCheckbox = $('.allCheckbox :checkbox');
        var $checkboxes = $('.singleCheckbox :checkbox');
        $allCheckbox.change(function () {
            if ($allCheckbox.is(':checked')) {
                $checkboxes.attr('checked', 'checked');
            }
            else {
                $checkboxes.removeAttr('checked');
            }
        });
        $checkboxes.change(function() {
            if ($checkboxes.not(':checked').length) {
                $allCheckbox.removeAttr('checked');
            }
            else {
                $allCheckbox.attr('checked', 'checked');
            }
        });
    });
</script>

工作示例 available