본문 바로가기
프로그래밍/jQuery

[jquery] 라디오 버튼 체크 여부 확인

by GenieIT* 2024. 12. 17.
728x90
반응형
반응형

 

Radio 버튼 체크 여부 확인하는 예제

728x90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>
	$(document).ready(function() {
	    $(document).ready(function() {
		    $('#checkRadio').click(function() {
		        // 선택된 라디오 버튼 확인
		        const selected = $('input[name="gender"]:checked').val(); // 선택된 값 가져오기

		        if (selected) {
		            alert(`선택된 값: ${selected}`);
		        } else {
		            alert('라디오 버튼이 선택되지 않았습니다.');
		        }
		    });
		});
	});
  </script>
</head>
<body>
	<form>
	    <input type="radio" name="gender" value="Male" id="male" checked> Male
	    <input type="radio" name="gender" value="Female" id="female"> Female
	    <button type="button" id="checkRadio">Check Radio</button>
	</form>
</body>
</html>
  • 설명 :
    • $('input[name="gender"]:checked'): name="gender"인 라디오 버튼 중에서 체크된 요소를 선택.
    • .val(): 선택된 요소의 값을 가져옴.
    • 만약 선택된 요소가 없다면, .val()은 undefined를 반환.

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

[jquery] DOM 요소 대체 메서드 (replaceAll)  (100) 2024.12.18
[jquery] 필터링 메서드 .first() .last() .eq() .not()  (75) 2024.12.17
[jquery] 제이쿼리를 사용하여 class로 값 가져오기  (47) 2024.12.09
[jquery] 제이쿼리를 사용하여 name으로 값 가져오기  (125) 2024.12.09
[jquery] 제이쿼리를 사용하여 id 값 가져오기  (71) 2024.12.08

관련글

GenieIT*님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바