자바 스크립트를 사용하여 클라이언트 측 목록보기의 모든 체크 박스를 선택하십시오.

Question

헤더에 체크 박스가있는 목록보기가 있습니다. 헤더 체크 박스가 선택/선택 해제되어있는 경우 행의 모든 ​​체크 박스를 선택하고 싶습니다. 클라이언트 측에서 어떻게 이것을 할 수 있습니까? 다음은 ListView 디자인 코드입니다.

<asp:ListView ID="lvTypes" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1"> 
    <LayoutTemplate> 
     <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid"> 
      <table id="DataTables_Table_0" class="table table-striped table-bordered bootstrap-datatable datatable responsive dataTable" aria-describedby="DataTables_Table_0_info"> 
       <thead class="box-header well" style="font-size: 12px !important;"> 
        <tr role="row"> 
         <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 50px;" aria-sort="ascending" aria-label="SNo: activate to sort column descending">S.No 
         </th> 
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 188px;" aria-label="Name: activate to sort column ascending">Name 
         </th>              
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 200px;" aria-label="Action: activate to sort column ascending"> 
          <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="chkSelectAll_CheckedChanged" Text="Action"/> 
         </th> 
         <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 188px;" aria-label="Employee ID: activate to sort column ascending">Desription 
         </th> 
        </tr> 
       </thead> 
       <tbody role="alert" aria-live="polite" aria-relevant="all"> 
        <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder> 

       </tbody> 
      </table> 
     </div> 
    </LayoutTemplate> 
    <GroupTemplate> 
     <tr> 
      <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder> 
     </tr> 
    </GroupTemplate> 
    <ItemTemplate> 
     <td style="text-align: center;"> 
      <%# Container.DataItemIndex + 1 %> 
     </td> 
     <td style="text-align: center;"> 
      <asp:CheckBox ID="cbDelProjectType" Checked="false" runat="server" /> 
      <a class="iframe2 cboxElement" href='<%# ResolveUrl("./Admin_EditPage.aspx?editTemplateId="+ Eval("id").ToString()) %>'> 
       <img src="./images/file_edit.png" alt="Edit Type" width="20px" height="20px" /> 
      </a> 
     </td> 
     <td style="text-align: center;"> 
      <%# Eval("title") %> 
     </td> 
     <td style="text-align: center;"> 
      <%# Eval("description") %> 
     </td> 

    </ItemTemplate> 
</asp:ListView> 

Answer 1

먼저 머리글 확인란을이 확인란으로 변경하십시오. 우리는 다시 게시 할 필요가 없습니다.

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="false" onchange="CheckAll(this);" Text="Action"/> 

당신의 태그에 자바 스크립트 다음이 부가 기능을 수행 한 후.

function CheckAll(checkid) { 
      var updateButtons = $('#DataTables_Table_0 input[type=checkbox]'); 
      if ($(checkid).children().is(':checked')) { 
       updateButtons.each(function() { 
        if ($(this).attr("id") != $(checkid).children().attr("id")) { 
         $(this).prop("checked", true); 
        } 
       }); 
      } 
      else { 
       updateButtons.each(function() { 
        if ($(this).attr("id") != $(checkid).children().attr("id")) { 
         $(this).prop("checked", false); 
        } 
       }); 
      } 
     } 

Answer 2

window.addEventListener("onload", function(){ 
    document.getElementById("DataTables_Table_0_wrapper").querySelector("thead").querySelector("input[type='checkbox']").addEventListener("click", checkTheBoxes, false); 
}, false); 

    function checkTheBoxes() 
    { 
    var checkIt; 

    if (this.checked) 
    { 
     checkIt = true; 
    } 
    else 
    { 
     checkIt = false; 
    } 

    var checkboxes = document.getElementById("DataTables_Table_0_wrapper").querySelector("tbody").querySelectorAll("input[type='checkbox']"); 
    Array.prototype.map.call(checkboxes, function(element){ 
     element.setAttribute("checked", checkIt); 
    }); 
    } 

이 그것을 수행해야합니다 : 그것은 헤더에 체크 박스에 클릭 이벤트를 추가로 시작

. 클릭하면 this.checked을 사용하여 상자를 체크했는지 여부를 확인합니다. 그런 다음 listview 테이블의 본문에서 확인란을 선택합니다. 테이블 자체는 ID가있는 div에 래핑됩니다. querySelectorAll을 사용하여 tbody의 모든 요소를 ​​선택하십시오. 이는 확인란입니다. 그런 다음 Array.prototype.map을 사용하여 반복하여 하나씩 선택하거나 선택을 취소하십시오.