jquery - input 전체 체크하기

javascript 코드

// jquery code

$("#all_item_check").change(function(){
  if($("input[id=all_item_check]:checkbox").is(":checked") == false){
    $("input[name=days]:checkbox").prop("checked", false);
  }else{
    $("input[name=days]:checkbox").prop("checked", true);
  }
});
$("input:checkbox[name='days']").click(function(){
  if($(this).is(":checked") == false){
    $("input:checkbox[id='all_item_check']").prop("checked", false);
  };
});

Html 코드

<div class="daySelect">
  <div class="">전체</div>
  <div class="">월</div>
  <div class="">화</div>
  <div class="">수</div>
  <div class="">목</div>
  <div class="">금</div>
  <div class="">토</div>
  <div class="">일</div>
  <div class=""><input id="all_item_check" type="checkbox" value="all"></div>
  <div class=""><input type="checkbox" name="days" value="mon"></div>
  <div class=""><input type="checkbox" name="days" value="tue"></div>
  <div class=""><input type="checkbox" name="days" value="wed"></div>
  <div class=""><input type="checkbox" name="days" value="thu"></div>
  <div class=""><input type="checkbox" name="days" value="fri"></div>
  <div class=""><input type="checkbox" name="days" value="sat"></div>
  <div class=""><input type="checkbox" name="days" value="sun"></div>
</div>

결과

전체 버튼을 클릭하면 모든 버튼이 클릭되고, 월~일 중 하나가 false가 되면 전체 버튼이 false 상태로 변하는 코드이다!

.daySelect {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

daySelect class에 display: grid 속성을 줘서 손쉽게 테이블 형태를 만들었다.