CodePen Embed - all check


<div>
  <input type="checkbox" onchange="checkAll(this)">
  전체 선택 / 해제
</div>

<div class='list_box'>
  <div>
    <input type="checkbox">
    1번
  </div>
  <div>
    <input type="checkbox">
    2번
  </div>
  <div>
    <input type="checkbox">
    3번
  </div>
  <div>
    <input type="checkbox">
    4번
  </div>
</div>

.list_box {
  margin-top: 1rem;
}

.list_box > div {
  padding: .2rem 0;
}

const checkAll = (target) => {
 const isChecked = target.checked;
  
 document.querySelectorAll(`.list_box input`)
   .forEach(el => {
      el.checked = isChecked;
   }); 
}

This Pen is owned by hyukson on CodePen.

See more by @hyukson on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.