728x90
300x250
[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);
});
});
$("#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
반응형
'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글
| [jQuery] 하이퍼링크 예제를 통한 {속성 Get, Set에 관한 설명} (5) | 2013.12.01 |
|---|---|
| [Javascript] 비밀번호 - 정규식 표현 (탬플릿) (6) | 2013.11.28 |
| [Javascript] PDFObject - PDF 파일 화면 출력하기 (5) | 2013.11.13 |
| [Javascript] 자녀 창에서 부모 창에 새로 고침 하기 (6) | 2011.02.02 |
| [Javascript] 웹 페이지 대화 상자 호출 방법 (6) | 2011.02.01 |