[JavaScript] jQuery 라디오버튼, 체크박스 체크 된 값 가져오기

checkbox 와 radio 

checkbox 와 radio 버튼을 간단하게 설명하자면

 

checkbox

1. 여러개를 선택 가능
2. 선택한거 취소 가능
3. 한개도 선택하지 않을 수 있음.

radio

1. 반드시 한개만 선택 가능
2. 선택하면  같은 name 을 가진 것들 중에 한개를 반드시 선택.
3. 선택한거 취소 불가능

radio 버튼 선택한 값 가져오기

라디오 버튼의 체크 여부와 체크된 값을 jQuery 를 사용하여 가져오는 값에 대하여 알아보면 아래와 같다.

var radioVar = $('input[name=radio_test]:checked').val(); // 선택된 값

var radio_check = $('input[name=radio_test]').is(":checked"); // 체크 여부

 

checkbox 선택한 값 가져오기

$('input:checkbox[name=checkList]').each(function (index) {
	if($(this).is(":checked")==true){
    	console.log($(this).val());
    }
}

name 말고 클래스나 id 로 찾고 싶을 경우에는 아래와 같이 하면 된다.

// class name
$(".checked_class_name").find('input:checked').each(function(index){

}

// #ID 
$("#checked_id").find('input:checked').each(function(index){

}

 

 

 

[참고자료]

[Language/CSS&javascript] - [jQuery, javascript] 동적으로 radio, checkbox를 만들었을 경우 이벤트 동작 처리하기 - onclick, onchange

[jQuery, javascript] 동적으로 radio, checkbox를 만들었을 경우 이벤트 동작 처리하기 - onclick, onchange