[JavaScript] 체크박스 상태 제어하기

html 코드

<input type="checkbox" id="checkItems" />
<label for="checkItems">체크박스</label>
<p id="status"></p>

---

체크박스 상태값 읽기

JavaScript

const checkbox = document.getElementById('checkItems')
console.log(checkbox.checked); // true 또는 false

 

jQuery

const isChecked = $('#checkItems').is(':checked');
console.log(isChecked ? '체크' : '해제');

---

체크박스 상태 변경하기

JavaScript

const checkbox = document.getElementById('checkItems');

// 체크박스 선택
checkbox.checked = true

// 체크박스 해제
checkbox.checked = false

 

jQuery

// 체크박스 선택
$('#checkItems').prop('checked', true);

// 체크박스 해제
$('#checkItems').prop('checked', false);

---

체크박스 상태 변경 감지하기

JavaScript

const checkbox = document.getElementById('checkItems');
checkbox.addEventListener('change', (event) => {
    console.log(event.target.checked ? '체크' : '해제');
})

// p 태그에 체크박스 상태값 출력하기
const status = document.getElementById('status');

checkbox.addEventListener('change', () => {
    status.textContent = checkbox.checked ? '체크' : '해제';
});

 

jQuery

$('#checkItems').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#status').text(isChecked ? '선택' : '해제')
})