jQuery Radio Button 다루기

Radio Change Event

$('input[name="radioButtonName"]').change(function() {
  console.log($(this).val());
});

Checked/Unchecked 찾기

// Checked 찾기
var id = $('input[name="radioButtonName"]:checked').attr('id');
var value = $('input[name="radioButtonName"]:checked').val();
 
// Unchecked 찾기
var str = "";
$('input[name="radioButtonName"]:not(:checked)').each(function() {
  var id = $(this).attr('id');
  var value = $(this).val();
  str += id + "/" + value + ", ";
});

상태 바꾸기 (Radio 1개)

// Checked 설정
$('#radioButtonId').prop('checked', true);
 
// Checked 해제
$('#radioButtonId').prop('checked', false);
 
// 상태 반전
$('#radioButtonId').prop('checked', !$('#radioButtonId').prop('checked'));

// 전체 Checked 해제
$('input[name="radioButtonName"]').each(function() {
  $(this).prop('checked', false);
});

Radio Value 알아내기

// (Checkbox 1개) Value
var id = $('#radioButtonId').attr('id');
var value = $('#radioButtonId').val();
 
// Checked Values
var id = $('input[name="radioButtonName"]:checked').attr('id');
var value = $('input[name="radioButtonName"]:checked').val();
 
// 전체 Unchecked Values
var str = "";
$('input[name="radioButtonName"]:not(:checked)').each(function() {
  var id = $(this).attr('id');
  var value = $(this).val();
  str += id + "/" + value + ", ";
});

Radio 개수 확인

// 전체 개수
// name으로 찾기
var num = $('input[name="radioButtonName"]').length;
 
// 전체 Checked 개수
var num = $('input[name="radioButtonName"]:checked').length;
 
// 전체 Unchecked 개수
var num = $('input[name="radioButtonName"]:not(:checked)').length;

Disabled 확인

// Disabled 여부 확인
// ID로 찾기
var b = $('#radioButtonId').prop('disabled');  // jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
 
// CSS attribute Selector로 찾기
var b = $('input[id="radioButtonId"').prop('disabled');

Disabled 설정/해제

// Disabled 설정
$('#radioButtonId').prop('disabled', true);
 
// Disabled 해제
$('#radioButtonId').prop('disabled', false);
 
// 전체 Disabled 설정
$('input[name="radioButtonName"]').each(function() {
  $(this).prop('disabled', true);
});
 
// 전체 Disabled 해제
$('input[name="radioButtonName"]').each(function() {
  $(this).prop('disabled', false);
});
 
//전체 Disabled 반전
$('input[name="radioButtonName"]').each(function() {
  $(this).prop('disabled', !$(this).prop('disabled'));
});

아래는 초기에 사용하던 방식인데 참조 하시기를 바랍니다.

// radio의 value값으로 선택하기
$("input[@name=rList]").filter('input[@value='+sValue+']').attr("checked", "checked");

if($("input[name=telcom]:radio:checked").length == 0){
  alert('선택해주세요');
}

$( "input[name='lesson']").eq(1).prop("checked", true).click();