复选框在HeaderTemplate中选择ItemTemplate中的所有复选框

问题描述：

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

<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 ...'这一行，因为它没有真正做任何事情。除此之外，你的代码对我来说似乎是正确的。 – Icarus 2012-02-28 16:38:29

张贴客户端的HTML源码不是服务器代码，如果你想这个转换 – charlietfl 2012-02-28 16:44:39

它看起来像问题是RadButtons不是作为实际的html输入发射。 – kevev22 2012-02-28 17:12:53

答

它看起来像问题是RadButtons不是作为实际的html输入发射。根据Telerik网站上的this post，如果您需要客户端解决方案，检查/取消选中所有RadButton的最简单方法是处理按钮的负载（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"但希望这仍然有效。

答

我做一个脚本使用jQuery您只必须改变DIV的德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中选择ItemTemplate中的所有复选框

相关推荐