Question

我想实现一个jQuery客户端脚本，通过单击{{1}中的复选框，可以检查/取消选中TreeList的<ItemTemplate>列中的所有复选框。 }。我现有的javascript代码现在无效。

<HeaderTemplate>

使用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>

Answer 1

看起来问题是RadButtons不是作为实际的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"做了什么，但希望这仍然有用。

Answer 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>

HeaderTemplate中的CheckBox选择ItemTemplate中的所有CheckBoxes

2 个答案: