javascript_javascript 기술로 모든 CheckBox를 선택하는 궁극적인 솔루션

프로그램 개발 시 일반적으로 Gridview 등과 같은 일부 데이터 바인딩 컨트롤에서 CheckBox를 사용하여 모두 선택하는 경우가 많습니다.

다음은 Repeater를 예로 들어 Repeater의 헤더와 항목에 CheckBox 컨트롤을 넣습니다.

<asp:Repeater ID="rptGroup" runat="server"> 
  <HeaderTemplate> 
    <table width="100%" cellspacing="1" >
      <tr> 
        <td width="3%" align="center" >
         <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" 
         onclick="checkAll  ('chkAll',this);" />             
        </td> 
      </tr> 
  </HeaderTemplate> 
  <ItemTemplate> 
    <tr> 
    <td align="center" >
     <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' 
     onclick="checkAll('chkAll',this);"/>
    </td> 
    </tr> 
  </ItemTemplate> 
  <FooterTemplate> 
    </table> 
  </FooterTemplate> 
 </asp:Repeater> 

다음은 js 스크립트입니다

checkAll 메소드는 CheckBox의 모든 선택 및 선택 취소를 구현합니다.

function checkAll(chkAllID, thisObj) {
  var chkAll = document.getElementById(chkAllID);
  var chks = document.getElementsByTagName("input");
  var chkNo = 0;
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      //全选触发事件  
      if (chkAll == thisObj) {
        chks[i].checked = thisObj.checked;
      }
      //非全选触发 
      else {
        if (chks[i].checked && chks[i].id != chkAllID)
          selectNo++;
      }
      if (chks[i].id != chkAllID) {
        chkNo++;
      }
    }
  }
  if (chkAll != thisObj) {
    chkAll.checked = chkNo == selectNo;
  }
} 

checkSelectNo 함수는 선택된 체크박스의 수를 얻는 데 사용됩니다. 이는 체크박스가 있는지 확인하는 데 사용할 때 매우 유용합니다.

function checkSelectNo(chkAllID) {
  var chks = document.getElementsByTagName("input");
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      if (chks[i].id != chkAllID && chks[i].checked) {
        selectNo++;
      }
    }
  }
  return selectNo;
} 

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.