제이쿼리 - 체크박스 사용

Checkbox

체크박스에 제이쿼리나 자바스크립트로 이벤트를 처리해야할 경우가 종종 있다.

 

checked 여부 확인하기

• id로 확인하기

$('input:checkbox[id="checkbox_id"]').is(":checked") == true

• name 으로 확인하기

$('input:checkbox[name="checkbox_name"]').is(":checked") == true$('input[name="checkbox_name"]').is(":checked")

• 제이쿼리 prop() 메소드

$('#checkboxId').prop("checked");

 

checked 처리 하기

• 개별 처리

$('input:checkbox[id="checkbox_id"]').attr("checked", true);

• 전체 처리

$('input:checkbox[name="checkbox_name"]').each(function() { this.checked = true; });

 

checkbox value 값 확인

$('input:checkbox[id="checkbox_id"]').val();

 

간단 예제로 체크박스 다루기

• HTML

<div class="">
    <div>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-test" id="test1">
            체크1
        </label>
    </div>
    <div>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-test" id="test2">
            체크2
        </label>
    </div>
    <div>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-test" id="test3">
            체크3
        </label>
    </div>
</div>

• Script

$(".checkbox-test").click(function () {
  let chekObj = document.getElementsByClassName("checkbox-test");
  let lenth = chekObj.length;
  let checked = 0;
  let checkboxTest;

  for (i = 0; i < lenth; i++) {
    if (chekObj[i].checked === true) {
      checked += 1;
      checkboxTest = chekObj[i].getAttribute("id");
      console.log(checkboxTest);
    }
  }

  if (checked >= 2){
    alert("한 가지만 선택해 주세요");
    return false;
  }
});