2023-09-07
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