WEB/JavaScript [JavaScript] 선택된 라디오 버튼만 checked로만들기 - 반응형 2023-09-07 사진: Unsplash 의 Chris Wong 1. 방법 prop 를 사용해 우선 해당 클래스의 버튼들을 checked false로 만든 이후 선택된 라디오 버튼만 checked 로 만들면 된다. <!DOCTYPE html> <html> <head> <title>라디오 버튼 예제</title> </head> <body> <input type="radio" class="radio_list" name="radio_group" value="Option 1"> Option 1<br> <input type="radio" class="radio_list" name="radio_group" value="Option 2"> Option 2<br> <input type="radio" class="radio_list" name="radio_group" value="Option 3"> Option 3<br> <script> // 라디오 버튼 요소들을 가져옵니다. var radioButtons = document.querySelectorAll(".radio_list"); // 라디오 버튼에 클릭 이벤트 리스너를 추가합니다. radioButtons.forEach(function(radio) { radio.addEventListener("click", function() { // 선택된 라디오 버튼만 checked 상태로 만듭니다. radioButtons.forEach(function(radioButton) { radioButton.checked = false; }); radio.checked = true; // 선택된 라디오 버튼의 value 값을 가져옵니다. var selectedValue = radio.value; console.log("선택된 값: " + selectedValue); }); }); </script> </body> </html> 2. JQuery 가져오는 방법 https://seeminglyjs.tistory.com/525 [JQuery] 선택된 라디오 버튼만 checked 되게 설정하기 2023-09-07 1. 방법 prop 를 사용해 우선 해당 클래스의 버튼들을 checked false로 만든 이후 선택된 라디오 버튼만 checked 로 만들면 된다. Option 1 Option 2 Option 3 메인 이미지 출처 : 사진: Unsplash의David Clode seeminglyjs.tistory.com 메인 이미지 출처 : 사진: Unsplash의Chris Wong 반응형 공유하기 게시글 관리 구독하기Seemingly Online 저작자표시 비영리 'WEB > JavaScript' 카테고리의 다른 글 [JavaScript] textArea 자동 크기 조절 방법 (resize) (0) 2023.09.22 [JavaScript] contenteditable 붙여넣기 텍스트만 넣기 (0) 2023.09.14 [JavaScript] 즉시 실행 함수 표현(IIFE) 알아보기. (0) 2023.07.29 [JavaScript] 자바스크립트를 . . . 로딩 함수 만들기 (0) 2023.06.29 [JavaScript] 자바스크립트 disabled 제어 방법(조회/추가/삭제) (0) 2023.06.28 Contents 당신이 좋아할만한 콘텐츠 [JavaScript] textArea 자동 크기 조절 방법 (resize) 2023.09.22 [JavaScript] contenteditable 붙여넣기 텍스트만 넣기 2023.09.14 [JavaScript] 즉시 실행 함수 표현(IIFE) 알아보기. 2023.07.29 [JavaScript] 자바스크립트를 . . . 로딩 함수 만들기 2023.06.29 댓글 0 + 이전 댓글 더보기