자바스크립트를 이용하여 체크박스 상태 가져오기

예제1 : pure javascript로 값 가져오기

var checked = document.getElementById("checkinfo1").checked;

위와 같이 작성하면 boolean형태의 값(true, false)을 반환 합니다.

제이쿼리로 작성하면 다음과 같습니다.

예제2: 제이쿼리(jQuery)로 값 가져오기

$('#checkinfo1').attr('checked'); // checked, null
//또는
$('#checkinfo1').prop('checked'); //true, false
//또는
$('#checkinfo1').is(':checked'); // true, false

위와 같이 여러가지 형태로 값을 가지고 올 수 있습니다.

예제3 : 제이쿼리(jQuery)를 이용하여 해당 엘리먼트(element) 조작하기

$('input:checked').each(function(i, el){
    console.log($(this).attr('id');
});

위와 같은 방법을 통해서  element 배열을 받아서 반복문을 사용할 수 있습니다.

반복문을 통해 직접 해당 element의 속성 등도 조작이 가능합니다.

예제4 : 전체 선택, 전체 해제

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', true);
  });
});

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', false);
  });
});

다음과 같은 체크박스예제를 활용하여 메일박스에 있는 check박스의 전체 선택/해제 등을 구현 할 수 있다.

체크박스에 대해서...

셀렉트박스(select)와 라디오버튼(type="radio")의 엘리먼트들은 값을 한가지만 선택할 수 있는 반면에 체크박스는 여러개의 값을 선택할 수 있는 특징을 가지고 있습니다.

기본적인 체크박스의 형태는 다음과 같습니다.

<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3">
    <label for="checkinfo3">value3</label>
</form>

그 중에 값이 check되어 있는 상태로 작성하고 싶으면 checked 속성을 사용합니다.

사용 예제는 아래와 같습니다.

<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1" checked="checked">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3" checked>
    <label for="checkinfo3">value3</label>
</form>

데이터가 전송될 때는 같은 name의 데이터가 사용되므로

위의 예제같은 경우에는

chk_info = "value1, value3"

이렇게 한개의 Key에 두개의 값이 , (콤마)로 구분되어 서버에 전송됩니다.