[jQuery] 체크박스, 라디오 버튼 선택과 해제

[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>

전체선택    /   1 2

---

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