jQuery – 라디오 버튼 체크 여부 확인

입력폼에서 라디오 버튼에 값을 선택하였는지 안하였는지 체크를 해서 만약 선택하지 않았다면 라디오 버튼으로 화면이 이동되어 체크할 수 있도록 해보자

일단 html에서 라디오버튼은 아래와 같이 설정하였다.

<legend>카테고리</legend>
	<fieldset>
		<input type="radio" id="Category1" value="카테고리1" name = "Category"/><label for="Category1">카테고리1</label>
		<input type="radio" id="Category2" value="카테고리2" name = "Category"/><label for="Category2">카테고리2</label>
		<input type="radio" id="Category3" value="카테고리3" name = "Category"/><label for="Category3">카테고리3</label>
		<input type="radio" id="Category4" value="카테고리4" name = "Category"/><label for="Category4">카테고리4</label>
	</fieldset>

 이제 제이쿼리 파일로 아래와 같이 설정하면 된다.

var Category1 = $('#Category1');

if($(':radio[name="Category"]:checked').length < 1){
	alert('카테고리를 선택해주세요');						
	Category1.focus();
	event.preventDefault();
}

var Category1은 html에서 id가 Category1인 것을 선언하였고,

 [name=”Category”]를 html에서 name 부분의 값이다.

Category1.focus() 는 위에 선언한 #Category1 으로 화면의 포커스가 이동하라는 것이다.

event.preventDefault(); 는 return false; 대신 쓴 것이다. 제이쿼리 API로 이후 넣은 코드들에 대한 진행을 중지시키는 것이다.

TOP