[JavaScript & jQuery] Checkbox 마스터 되기 프로젝트!

안녕! 오늘은 체크박스 이야기를 해볼까 해. 체크박스, 다들 한 번쯤은 써봤지? 클릭하면 체크되고, 다시 클릭하면 풀리는 그 단순하지만 마법 같은 상자! 그런데 이걸 자바스크립트랑 jQuery로 다루려면 어떻게 해야 할까? 우리가 알면 유용하고, 모르면 약간 골치 아픈 친구야.

그래서 오늘은 체크박스 값 가져오기랑 제어하기 방법을 친절하게 알려줄게! 쉬운 예제도 준비했으니까 기대해도 좋아~ 😊

---

1️⃣ 체크박스 값 가져오기 (JavaScript 버전)

자바스크립트에서 체크박스를 다룬다는 건... 음, 네가 체크박스에게 "너 체크됐어?"라고 물어보는 거랑 같아. 아주 간단한 대화야.
예를 들어 볼게:

<input type="checkbox" id="myCheckbox"> 체크할래요?
<button onclick="checkStatus()">확인하기</button>

<script>
  function checkStatus() {
    const checkbox = document.getElementById('myCheckbox');
    if (checkbox.checked) {
      alert('체크되어 있어요!');
    } else {
      alert('체크 안 됐어요!');
    }
  }
</script>

여기서 checkbox.checked라는 속성이 등장했지?
이 속성은 true나 false 값을 반환해. 즉, 체크박스가 체크되면 true, 아니면 false라는 거지. 정말 간단하지?

---

2️⃣ 체크박스 값 가져오기 (jQuery 버전)

자바스크립트도 좋지만, jQuery는 더 간단하고, 살짝 더 부드러운 느낌이 있어. 이건 약간 마법 같은 느낌인데, 자~ 한번 볼까?

 체크할래요?
확인하기
  $('#checkButton').click(function() {
    if ($('#myCheckbox').is(':checked')) {
      alert('체크되어 있어요!');
    } else {
      alert('체크 안 됐어요!');
    }
  });

여기서 눈여겨봐야 할 건 .is(':checked')야.
이건 jQuery만의 방식으로 "너 체크됐니?"라고 묻는 거야.
신기하지? 단순하면서도 감각적인 방식이지.

---

3️⃣ 체크박스 제어하기

체크박스한테 "너 지금부터 무조건 체크해!"라고 명령하고 싶다면? 가능하지!
우선 JavaScript부터:

<input type="checkbox" id="myCheckbox"> 체크할래요?
<button onclick="forceCheck()">무조건 체크!</button>

<script>
  function forceCheck() {
    const checkbox = document.getElementById('myCheckbox');
    checkbox.checked = true; // 체크 상태로 강제 변경
    alert('이제 체크박스는 체크됐어요!');
  }
</script>

그리고 jQuery는?
jQuery는 이렇게:

<input type="checkbox" id="myCheckbox"> 체크할래요?
<button id="forceCheck">무조건 체크!</button>

<script>
  $('#forceCheck').click(function() {
    $('#myCheckbox').prop('checked', true);
    alert('jQuery로도 체크 완료!');
  });
</script>

여기서 .prop('checked', true)는 "너는 이제 체크 상태야!"라고 말하는 것과 같아. 귀엽지?

---

4️⃣ 다수의 체크박스 관리하기

만약 체크박스가 여러 개라면? 예를 들어 쇼핑몰에서 옵션 선택할 때처럼 말이야. 그럴 땐 이렇게 할 수 있어:

<label><input type="checkbox" class="item"> 옵션 1</label>
<label><input type="checkbox" class="item"> 옵션 2</label>
<label><input type="checkbox" class="item"> 옵션 3</label>
<button onclick="getSelectedItems()">선택한 옵션 보기</button>

<script>
  function getSelectedItems() {
    const checkboxes = document.querySelectorAll('.item');
    const selected = [];
    checkboxes.forEach((checkbox) => {
      if (checkbox.checked) {
        selected.push(checkbox.parentElement.textContent.trim());
      }
    });
    alert('선택된 옵션: ' + selected.join(', '));
  }
</script>

jQuery로는?

<label><input type="checkbox" class="item"> 옵션 1</label>
<label><input type="checkbox" class="item"> 옵션 2</label>
<label><input type="checkbox" class="item"> 옵션 3</label>
<button id="showOptions">선택한 옵션 보기</button>

<script>
  $('#showOptions').click(function() {
    const selected = $('.item:checked').map(function() {
      return $(this).parent().text().trim();
    }).get();
    alert('선택된 옵션: ' + selected.join(', '));
  });
</script>

이건 약간 고급 테크닉이긴 한데, 네가 여러 개의 체크박스를 다뤄야 한다면 반드시 알아야 할 친구야.

---

마무리

어때? 체크박스를 다루는 게 이제 좀 쉬워졌지? 사실 체크박스는 아주 단순한 친구라 처음엔 복잡해 보여도 조금만 연습하면 금방 친해질 수 있어.
이제는 직접 예제를 따라 해 보면서 네가 직접 체크박스 마스터가 되어 봐!