[jQuery] jQuery 체크박스 체크여부 및 일괄선택/해제 예제

1. checked 여부 확인

 

$("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */

$("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */

 

2. checked/unchecked 처리

$("input:checkbox[id='ID']").attr("checked", true); /* by ID */

$("input:checkbox[name='NAME']").attr("checked", false); /* by NAME */

3. 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제

 

$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true);

$("input:radio[name='NAME']").removeAttr("checked");

​

전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택해주는 것을 만들어보자.

​

​

HTML 코드는 아래와 같이 체트박스 6개로 구성되어 있다..

<label><input type='checkbox' id='check_all' class='input_check' /> <b>전체선택</b></label>

<ul class='select_subject'>

<label><input type='checkbox' class='input_check' name='class[1]' value='1' /> <b>One</b></label>

<label><input type='checkbox' class='input_check' name='class[2]' value='2' /> <b>Two</b></label>

<label><input type='checkbox' class='input_check' name='class[3]' value='3' /> <b>Three</b></label>

<label><input type='checkbox' class='input_check' name='class[4]' value='4' /> <b>Four</b></label>

<label><input type='checkbox' class='input_check' name='class[5]' value='5' /> <b>Five</b></label>

</ul>

 

jQuery 코드는 다음과 같다.

​

$(function(){

$("#check_all").click(function(){

var chk = $(this).is(":checked");//.attr('checked');

if(chk) $(".select_subject input").attr('checked', true);

else $(".select_subject input").attr('checked', false);

});

});

 

결과화면

 

 

 

 

[출처] [jQuery] jQuery 체크박스 체크여부 및 일괄선택/해제 예제|작성자 주한길