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

예제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박스의 전체 선택/해제 등을 구현 할 수 있다.

제이쿼리를 쓰다보면 찾은 객체에서 여러 객체를 찾아가게 되는 경우가 종종 생깁니다.

이 때 좋은 api 중 하나가 closest()입니다.

closest(selector)

예제는 

li객체의 텍스트를 클릭하면 백그라운드가 파란색으로 바뀐다.

위와 같이 부모 객체를 찾는 유용한 API다.

jquery의 parents() API와 가장 큰 차이점은

하나의 객체만 반환한다는 점이다.

parents() API의 경우 여러개의 반환값으로 인해 loop를 이용하거나 특정 index를 선택해서 사용했지만 closest는 단 하나의 객체만 반환 하므로 그럴필요가 없다.

parent() API의 경우는 직계부모의 객체만 해당 되므로 다음과 같은 예제에는 사용할 수 없다.

위의 사항을 유의 하면서 parent(), parents(), closest()를 유용하게 사용해 보자.