라디오버튼 선택시 작동하는 함수를 만들고 습니다.
본문
아래와 같은 세개의 라디오버튼과 한개의 텍스트인풋이 있습니다.
<input type="radio" name="wr_1" value="1" >
<input type="radio" name="wr_1" value="2" >
<input type="radio" name="wr_1" value="3" >
<input type="text" name="wr_2">
자바스크립트를 이렇게 하고 싶습니다.
첫번째 라디오버튼을 클릭했을때는 텍스트가 20 이상일때 alert 발생
두번째 라디오버튼을 클릭했을때는 텍스트가 30 이상일때 alert 발생
세번째 라디오버튼을 클릭했을때는 텍스트가 40 이상일때 alert 발생
함수를 어떻게 만들어야 할지 감이 안오네요....
고수님들의 도움을 부탁드립니다.
감사합니다.
답변 2
gpt
<input type="radio" name="wr_1" value="1" id="radio1">
<input type="radio" name="wr_1" value="2" id="radio2">
<input type="radio" name="wr_1" value="3" id="radio3">
<input type="text" name="wr_2" id="text-input">
<script>
document.addEventListener("DOMContentLoaded", function() {
// 라디오 버튼과 텍스트 입력 필드에 대한 참조 가져오기
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var radio3 = document.getElementById("radio3");
var textInput = document.getElementById("text-input");
// 라디오 버튼을 클릭했을 때 실행할 함수 정의
function handleRadioClick(event) {
var inputValue = parseInt(textInput.value);
// 라디오 버튼에 따라 다른 조건을 검사
if (event.target === radio1 && inputValue >= 20) {
alert("첫번째 라디오버튼을 선택하셨고, 텍스트가 20 이상입니다.");
} else if (event.target === radio2 && inputValue >= 30) {
alert("두번째 라디오버튼을 선택하셨고, 텍스트가 30 이상입니다.");
} else if (event.target === radio3 && inputValue >= 40) {
alert("세번째 라디오버튼을 선택하셨고, 텍스트가 40 이상입니다.");
}
}
// 라디오 버튼에 클릭 이벤트 리스너 추가
radio1.addEventListener("click", handleRadioClick);
radio2.addEventListener("click", handleRadioClick);
radio3.addEventListener("click", handleRadioClick);
});
</script>
답변 감사드립니다 많은 도움이 되었습니다.
다만 제가 드린 정보가 부족하거나 잘못 적어...조금더 도움을 요청드립니다.
정확하게는 라디오버튼 클릭시 이벤트가 생기는게 아니라 submit버튼 클릭시 발생하여야 합니다.
그래서 alert 를 띄우고 다른 입력검증절차처럼 넘어가지 않고 return false; 되어야 합니다.
그래서 fwrite_submit() 함수 안에다가 적어야 하는데요
이런경우 어떻게 해야 하나요?
<form id="myForm">
<input type="radio" name="wr_1" value="1" id="radio1">
<input type="radio" name="wr_1" value="2" id="radio2">
<input type="radio" name="wr_1" value="3" id="radio3">
<input type="text" name="wr_2" id="text-input">
<input type="submit" value="Submit">
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("myForm");
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var radio3 = document.getElementById("radio3");
var textInput = document.getElementById("text-input");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 기본 제출 동작을 막습니다.
var inputValue = parseInt(textInput.value);
if (radio1.checked && inputValue >= 20) {
alert("첫번째 라디오버튼을 선택하셨고, 텍스트가 20 이상입니다.");
} else if (radio2.checked && inputValue >= 30) {
alert("두번째 라디오버튼을 선택하셨고, 텍스트가 30 이상입니다.");
} else if (radio3.checked && inputValue >= 40) {
alert("세번째 라디오버튼을 선택하셨고, 텍스트가 40 이상입니다.");
}
});
});
</script>
<form id="myForm" onsubmit="return fwrite_submit();">
<input type="radio" name="wr_1" value="1" id="radio1">
<input type="radio" name="wr_1" value="2" id="radio2">
<input type="radio" name="wr_1" value="3" id="radio3">
<input type="text" name="wr_2" id="text-input">
<input type="submit" value="Submit">
</form>
<script>
function fwrite_submit() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var radio3 = document.getElementById("radio3");
var textInput = document.getElementById("text-input");
var inputValue = parseInt(textInput.value);
if (radio1.checked && inputValue >= 20) {
alert("첫번째 라디오버튼을 선택하셨고, 텍스트가 20 이상입니다.");
return false; // submit을 막고 폼을 제출하지 않음
} else if (radio2.checked && inputValue >= 30) {
alert("두번째 라디오버튼을 선택하셨고, 텍스트가 30 이상입니다.");
return false; // submit을 막고 폼을 제출하지 않음
} else if (radio3.checked && inputValue >= 40) {
alert("세번째 라디오버튼을 선택하셨고, 텍스트가 40 이상입니다.");
return false; // submit을 막고 폼을 제출하지 않음
}
// 만약 검증에 통과하면 폼을 제출하도록 true 반환
return true;
}
</script>
채택 감사 합니다.
<input type="radio" name="wr_1" value="1" >
<input type="radio" name="wr_1" value="2" >
<input type="radio" name="wr_1" value="3" >
<input type="text" name="wr_2">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('[name="wr_1"]').click(function () {
var wr_1_val = $(this).val();
var wr_2_val = $('[name="wr_2"]').val();
wr_2_val = Number(wr_2_val.replace(/\D/g, ''));
if (wr_1_val == 3 && wr_2_val >= 40) {
alert(wr_2_val + ' >= 40');
} else if (wr_1_val == 2 && wr_2_val >= 30) {
alert(wr_2_val + ' >= 30');
} else if (wr_1_val == 1 && wr_2_val >= 20) {
alert(wr_2_val + ' >= 20');
}
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.