[JQuery/Javascript] checkbox 모두 선택 / checkbox control / checkbox 이벤트

 

* checkbox 요건

- [전체선택] 클릭 시 하위 checkbox 모두 체크
- [전체선택] 클릭 시 하위 checkbox 모두 체크 해제
- 하위 checkbox 모두 체크 시 [전체선택] 체크
- 하위 checkbox 하나라도 뺄 시 [전체선택] 체크해제

전체선택

 

checkbox HTML

<table>
  <tr style="background:grey">
    <td>
      <input type="checkbox" id="checkAll" onclick="checkAllClick()"> 전체선택 
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkedIdx" class="checktype" value="1" onclick="checkBoxValueChanged()">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkedIdx" class="checktype" value="2" onclick="checkBoxValueChanged()">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkedIdx" class="checktype" value="3" onclick="checkBoxValueChanged()">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkedIdx" class="checktype" value="4" onclick="checkBoxValueChanged()">
    </td>
  </tr>
</table>

 

 Javascript 로 checkbox 이벤트 만들기

const checkBoxes = document.getElementsByName('checkedIdx');

//[전체선택] 클릭 시 하위 checkbox 모두 체크 또는 체크 해제
function checkAllClick(){
  if(document.getElementById('checkAll').checked){
    for(var i=0;i<checkBoxes.length;i++){
      checkBoxes[i].checked = true;
    }
  }else{
    for(var i=0;i<checkBoxes.length;i++){
      checkBoxes[i].checked = false;
    }
  }
}

//하위 checkbox 체크 여부에 따른 [전체선택] checkbox 체크 변경
function checkBoxValueChanged(){
  var checkedCnt = 0;
  for(let i=0; i<checkBoxes.length;i++){
    if(checkBoxes[i].checked){
      checkedCnt ++;
    }
  }
  if(checkedCnt == checkBoxes.length){
    document.getElementById('checkAll').checked = true;
  }else{
    document.getElementById('checkAll').checked = false;
  }
}

 

jquery로 checkbox 이벤트 만들기

//[전체선택] 클릭 시 하위 checkbox 모두 체크 또는 체크 해제
$('#checkAll').click(function(){ 
    if($('#checkAll').is(':checked')){ 
        $('.checktype').prop("checked",true); 
    }else{ 
        $('.checktype').prop("checked",false); 
    } 

});


//하위 checkbox 체크 여부에 따른 [전체선택] checkbox 체크 변경
$('.checktype').click(function(){ 
   if($('input[class=checktype]:checked').length == $('input[class=checktype]').length){ 
       $('#checkAll').prop("checked",true); 
    }else{ 
       $('#checkAll').prop("checked",false); 
    } 
});