jQuery input checkbox, radio 제어하기

jQuery를 이용하여 상황별 체크박스를 제어해보자.

기본적으로 대부분은 radio도 동일하게 사용된다.

상황1

체크된 모든 엘리먼트(element)의 개수를 확인하기

체크상태를 확인하는 선택자(selector)의 필터는 ":checked" 이다.

$("선택자:checked") 가 기본값이고, filter를 이용해도 된다.

$("선택자").filter(":checked");

$("#btnbyname").click(function(){
	$("#dp_btnbyname").text($("input[type='checkbox'][name='chk[]']:checked").length);
});
$("#btnbyclass").click(function(){
  // 기본사용법
  //$("#dp_btnbyclass").text($("input[type='checkbox'].chk:checked").length);
  // 클래스만으로 선택하기
  //$("#dp_btnbyclass").text($(".chk:checked").length)
  // 필터를 이용한 방법
  $("#dp_btnbyclass").text($("input[type='checkbox'].chk").filter(":checked").length);
});

상황2

form 전송전 체크여부 확인하기

":checked" 필터는 객체 배열로 반환하는데 특정 체크박스의 체크 여부는 .is(":checked"); 또는 .prop("checked");로 확인한다.

if($("#input").is(":checked")){
   alert("체크되었습니다.");
}
if($("#input").prop("checked")){
   alert("체크되었습니다.");
}

상황3

체크 안된 엘리먼트를의 개수를 확인하기

체크 안된 것은 ":not()" 필터를 이용한다

상황4

체크박스의 라벨(label)에 스타일 적용하기

체크하면 해당 라벨에 색을 준다던가 등의 스타일 적용하는데 

이때 라벨이 체크박스를 감싸고 있던가, 체크박스별로 아이디를 부여해서 적용하던가 해야 한다.