複選框在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>

來源

2012-02-28 JF Beaulieu

當您單擊複選框時，是否在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"但希望這仍然有效。

來源

2012-02-28 17:25:21 kevev22

我做一個腳本使用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>

來源

2012-02-28 16:54:04

複選框在HeaderTemplate中選擇ItemTemplate中的所有複選框

回答

相關問題