[jQuery] 체크박스, 라디오 버튼 선택과 해제
jQuery를 활용하여 체크 박스 선택 여부, Checked 처리, 라디오 버튼 선택과 해제에 대해서 소개하겠다.
1. Check 여부 확인
$("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");
4. 전체 선택을 하면 모두 선택될 수 있도록 기능 구현
<
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
>1</
b
></
label
>
<
label
><
input
type
=
'checkbox'
class
=
'input_check'
name
=
'class[2]'
value
=
'2'
/> <
b
>2</
b
></
label
>
</
ul
>
5. 기타
이런식으로 html이 있고, javascript 부분은 아래와 같이 처리하면 좋다.
$(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);
});
});
6. 참고자료(Reference)
1. http://hobbiez.tistory.com/321, Accessed by 2013-11-11