[JavaScript / jQuery]라디오(radio) 버튼 이벤트(checked, change) 및 바인딩 처리 방법

아래 샘플 html 태그를 기준으로 제이쿼리와 자바스크립트를 이용하여 라디오버튼을 핸들링하는 방법에 대해 기술합니다.

[HTML 태그]

<input type="radio" name="choose_type" value="A" checked="checked"><label>생명보험</label>
<input type="radio" name="choose_type" value="B"><label>자동차보험</label>
<input type="radio" name="choose_type" value="C"><label>실손보험</label>
<input type="radio" name="choose_type" value="D"><label>여행자보험</label>
<input type="radio" name="choose_type" value="E"><label>암보험</label>

radio 버튼 change 이벤트 방법

$("input[name='choose_type']:radio").change(function () {
	//라디오 버튼 선택값 
	alert(this.value);

	if(this.value == 'A') {
		$("#div_item").show();
		$("#div_item2").hide();
	}
});
//또 다른 방법
$(document).ready(function() {
    $('input[type=radio][name="choose_type"]').change(function() {
        alert($(this).val()); //  또는 `this.value` 사용가능
    });
});

radio 버튼 선택값 가져오는 방법

var id = $('input[name="choose_type"]:checked').attr('id');
var value = $('input[name="choose_type"]:checked').val();
var value2 = $('input:radio[name="choose_type"]:checked').val();

radio 버튼 기본값 설정 방법

$(“input:radio[name=choose_type]:radio[value=’C’]”).prop(“checked”, true);

라디오버튼 전체 선택 해제 방법

$('input[name="choose_type"]').each(function() {
       $(this).prop('checked', false);
});

라디오 버튼 Disable 설정 및 해제 방법

$('input[name="choose_type"]').each(function() {
    $(this).prop('disabled', true);
});
 
$('input[name="choose_type"]').each(function() {
    $(this).prop('disabled', false);
});