HeaderTemplateのCheckBoxでItemTemplate内のすべてのチェックボックスを選択する

TreeListの<ItemTemplate>列にあるすべてのチェックボックスをチェック/チェックボックスをオフにするにはjQueryクライアント側スクリプトを実装したいと思っています。私が持っているjavascriptコードは今働いていません。HeaderTemplateのCheckBoxで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

クライアントサイドのHTMLソースがサーバーコードでない場合変換したい – charlietfl

RadButtonが実際のhtml入力として出力されないという問題があるようです。 – kevev22

RadButtonが実際のhtml入力として発行されないという問題があるようです。 Telerikサイトのthis postによれば、クライアントサイドのソリューションが必要な場合は、ボタンのロード（OnClientLoadプロパティ）クライアント側のイベントを処理し、ボタンのグローバル配列に値を設定することがすべてのRadButtonのチェック/チェックを解除する最も簡単な方法です。だからあなたの場合：

の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

私はあなただけのテンプレートタグのためのdivのデIDを変更する必要がありますjQueryを使ってスクリプトを実行します。

<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のCheckBoxでItemTemplate内のすべてのチェックボックスを選択する

答えて

関連する問題