[jQuery] Checkbox/Radio 버튼 컨트롤

1. 버튼의 checked 여부 확인

$("input:checkbox[id='아이디명']").is(':checked')       // true : false
$("input:checkbox[name='NAME명']").is(':checked')      // true : false
 
$("input:radio[id='아이디명']").is(':checked')          // true : false
$("input:radio[name='NAME명']").is(':checked')         // true : false​

 

2. checked/unchecked 제어하기

$("input:checkbox[id='아이디명']").prop("checked", true);         // 체크박스 checked
$("input:checkbox[name='NAME명']").prop("checked", false);       // 체크박스 unchecked
 
$("input:radio[id='아이디명']").prop("checked", true);            // 라디오 checked
$("input:radio[name='NAME명']").prop("checked", false);          // 라디오선택 unchecked

 

3. 선택(checked)된 값 가져오기

$("input:checkbox[id='아이디명']:checked").val();
$("input:checkbox[name='NAME명']:checked").val();
 
$("input:radio[id='아이디명']:checked").val();
$("input:radio[name='NAME명']:checked").val();

 

4. 특정 값의 체크박스 선택/해제하기

$("input:checkbox[id='아이디명']:checkbox[value='값']").prop('checked', true);
$("input:checkbox[name='NAME명']:checkbox[value='값']").prop('checked', false);
 
$("input:radio[id='아이디명']:checkbox[value='값']").prop('checked', true);
$("input:radio[name='NAME명']:checkbox[value='값']").prop('checked', false);

 

5. 단일 라디오 버튼 체크박스처럼 체크/해제 사용하기

 

                var chk = false;
                
                $('#radio').click(function (e) {
                    if (chk) {
                        chk = false;
                        $("input:radio[id='radio']").prop("checked", false);
                    }
                    else {
                        chk = true;
                        $("input:radio[id='radio']").prop("checked", true);
                    }
                });

 

출처

https://jjunpa.tistory.com/12
https://saem-ee.tistory.com/18