[jQuery(제이쿼리)] 체크박스 값(checkbox value) 가져오기


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;
  }
});