Programming/Javascript

전체 동의 checkbox 구현 (jQuery 사용하지 않고)

Lawmin 2020. 7. 20. 11:57
<input type="checkbox" id="agree1" onclick="checkAllCheckbox();"> 
<label for="agree1">[필수] 동의1</label>

<input type="checkbox" id="agree2" onclick="checkAllCheckbox();"> 
<label for="agree2">[필수] 동의2 </label>

<input type="checkbox" id="agreeAll" onclick="toggleAllCheckbox(this);"> 
<label for="agreeAll">전체 동의</label>



<script type="text/javascript">

function checkAllCheckbox() { 
  var agreeAllCheckbox = document.getElementById("agreeAll"); 
  var e = document.querySelectorAll('input[type="checkbox"]:not(#agreeAll)'); 
  for(var i = 0, len = e.length; i < len; ++i) { 
    if(!e[i].checked) { 
      agreeAllCheckbox.checked = false; 
      return; 
    } 
  } 
  agreeAllCheckbox.checked = true; 
}



function toggleAllCheckbox(source) { 
  var e = document.querySelectorAll('input[type="checkbox"]:not(#agreeAll)'); 
  for(var i = 0, len = e.length; i < len; ++i) { 
    e[i].checked = source.checked; 
  } 
}