HeaderTemplate의 CheckBox가 ItemTemplate의 모든 CheckBox를 선택합니다.

jQuery 클라이언트 측 스크립트를 구현하여 TreeList의 <ItemTemplate> 열에있는 모든 확인란을 선택/선택 취소 할 수 있습니다. . 내가 가지고있는 자바 스크립트 코드는 지금은 작동하지 않습니다.HeaderTemplate의 CheckBox가 ItemTemplate의 모든 CheckBox를 선택합니다.

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

자바 스크립트 :

<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

확인란을 클릭하면 자바 스크립트 콘솔에 오류가 표시됩니까? 나는'TotalChkBx ...'줄을 제거 할 것이다. 왜냐하면 실제로 아무 것도하지 않기 때문이다. 그 외에는 코드가 맞습니다. – Icarus

게시자 측 html 소스 서버 코드가 아님이 변환하려는 경우 – charlietfl

RadButton이 실제 HTML 입력으로 생성되지 않는다는 것이 문제인 것처럼 보입니다. – kevev22

RadButton이 실제 html 입력으로 방출되지 않는 것 같습니다. Telerik 사이트의 this post에 따르면 클라이언트 쪽 솔루션이 필요한 경우 모든 RadButton을 확인/선택 취소하는 가장 쉬운 방법은 단추의로드 (OnClientLoad 속성) 클라이언트 쪽 이벤트를 처리하고 단추의 전체 배열을 채우는 것입니다 . 따라서 귀하의 경우 :

자바 스크립트의이 비트 추가

<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

난 당신은 템플릿 태그 사업부의 드 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의 모든 CheckBox를 선택합니다.

답변

관련 문제