HeaderTemplate 中的 CheckBox 以选择 ItemTemplate 中的所有 CheckBox答案

【问题标题】：CheckBox in HeaderTemplate to Select All CheckBoxes in ItemTemplateHeaderTemplate 中的 CheckBox 以选择 ItemTemplate 中的所有 CheckBox
【发布时间】：2012-03-18 03:36:09
【问题描述】：

我想实现一个 jQuery 客户端脚本，以便能够通过单击位于 <HeaderTemplate> 中的复选框来检查/取消选中 TreeList 的 <ItemTemplate> 列中的所有复选框。我的 javascript 代码现在不起作用。

<telerik:TreeListTemplateColumn HeaderText="" SortExpression="IsSelected" UniqueName="IsSelected">
    <ItemTemplate>
        <telerik:RadButton ID="btnSelected" runat="server" AutoPostBack="false"  ButtonType="ToggleButton" 
            ToggleType="CheckBox" OnCheckedChanged="btnSelected_CheckedChanged" >
        </telerik:RadButton>
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" onclick="selectAll(this);" />
    </HeaderTemplate>
    <HeaderStyle HorizontalAlign="Center" Width="35px"/>
    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
</telerik:TreeListTemplateColumn>

Javascript：

<telerik:RadCodeBlock>
    <script type="text/javascript">
    function SelectAll(CheckBox) {
        TotalChkBx = parseInt('<%= this.rtlRshItems.Items.Count %>');
        var TargetBaseControl = document.getElementById('<%= this.rtlRshItems.ClientID %>');
        var TargetChildControl = "btnSelected";
        var Inputs = TargetBaseControl.getElementsByTagName("input");
        for (var iCount = 0; iCount < Inputs.length; ++iCount) {
            if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0)
                Inputs[iCount].checked = CheckBox.checked;
        }
    }
    </script>
</telerik:RadCodeBlock>

【问题讨论】：

当您单击复选框时，您是否在 javascript 控制台上看到任何错误？我会删除 TotalChkBx ... 行，因为它并没有真正做任何事情。除此之外，您的代码对我来说似乎是正确的。
发布客户端 html 源代码而不是服务器代码，如果您希望此转换
看起来问题在于 RadButtons 没有作为实际的 html 输入发出。

标签： javascript jquery asp.net telerik asp.net-3.5

【解决方案1】：

看起来问题在于 RadButton 没有作为实际的 html 输入发出。根据 Telerik 网站上的this post，如果您需要客户端解决方案，检查/取消选中所有 RadButtons 的最简单方法是处理按钮的加载（OnClientLoad 属性）客户端事件，并填充全局数组按钮。所以在你的情况下：

添加这段 javascript：

<script type="text/javascript">
    var buttons = [];
    function ButtonLoad(sender, args)
    {
        Array.add(buttons, sender);
    }

    var checked = true;
    function SelectAll()
    {
        var length = buttons.length;
        for (var i = 0; i < length; i++)
        {
            buttons[i].set_checked(checked);
        }
        checked = !checked;
    }
</script>

然后将其添加到您的 btnSelected：

OnClientLoad="ButtonLoad"

所以它看起来像：

<ItemTemplate>
    <telerik:RadButton 
        ID="btnSelected" 
        runat="server" 
        AutoPostBack="false" 
        ButtonType="ToggleButton" 
        ToggleType="CheckBox" 
        OnClientLoad="ButtonLoad"
        OnCheckedChanged="btnSelected_CheckedChanged">
    </telerik:RadButton>
</ItemTemplate>

我不确定你在用 OnCheckedChanged="btnSelected_CheckedChanged" 做什么，但希望这仍然有效。

【讨论】：

【解决方案2】：

我用 jquery 做一个脚本，你只需要为你的模板标签改变 div 的 de id。

<html>
    <head>
    <script language="javascript" src="./js/jquery.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            $("#cabecera :checkbox").click(function(){
                if($("#cabecera :checkbox").is(":checked")){
                    $("#cuerpo :checkbox").attr("checked", "checked");
                }
                else{
                    $("#cuerpo :checkbox").removeAttr("checked");
                }
            });
        });
    </script>
    </head>
    <body>
        <div id="cabecera">
            <input type="checkbox" /> Select all
        </div>
        <div id="cuerpo">
            <input type="checkbox" />1
            <input type="checkbox" />2
            <input type="checkbox" />3
            <input type="checkbox" />4
        </div>
    </body>
    </html>

【讨论】：