10강 - 체크박스, 전체선택 및 해제

• CODEPEN - 1부

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div>
    <input type="checkbox" class="form-1__checkbox-all">
</div>
<hr>
<section>
    <!-- nav*10>input[type=checkbox].form-1__checkbox-item -->
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
</section>

console.clear();

$('.form-1__checkbox-all').change(function() {
    console.log(this.checked);
});

---

• CODEPEN - 2부

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div>
    <input type="checkbox" class="form-1__checkbox-all">
</div>
   <hr>
<section>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
</section>

console.clear();

$('.form-1__checkbox-all').change(function(){
    if(this.checked){
        $('.form-1__checkbox-item:not(:checked)').prop('checked', true);
    } else {
        $('.form-1__checkbox-item').prop('checked', false);
    }
});

$('.form-1__checkbox-item').change(function(){
    let allChecked = $('.form-1__checkbox-item:not(:checked)').length == 0;
    $('.form-1__checkbox-all').prop('checked', allChecked);
});

---

• CODEPEN - 3부

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div>
    <input type="checkbox" class="form-1__checkbox-all">
</div>
<hr>
<section>
    <!-- nav*10>input[type=checkbox].form-1__checkbox-item -->
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
</section>

console.clear();

$('.form-1__checkbox-all').change(function() {
    if ( this.checked ) {
        $('.form-1__checkbox-item:not(:checked)').prop('checked', true);
    } else {
        $('.form-1__checkbox-item').prop('checked', false);
    }
});

---

• CODEPEN - 4부

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div>
    <input type="checkbox" class="form-1__checkbox-all">
</div>
<hr>
<section>
    <!-- nav*10>input[type=checkbox].form-1__checkbox-item -->
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
    <nav><input type="checkbox" class="form-1__checkbox-item"></nav>
</section>

console.clear();

$('.form-1__checkbox-all').change(function() {
    if ( this.checked ) {
        $('.form-1__checkbox-item:not(:checked)').prop('checked', true);
    } else {
        $('.form-1__checkbox-item').prop('checked', false);
    }
});


$('.form-1__checkbox-item').change(function() {
    let allChecked = $('.form-1__checkbox-item:not(:checked)').length == 0;
    $('.form-1__checkbox-all').prop('checked', allChecked);
})