버튼클릭시 선택된 라디오 값들의 합계를 보여주고 싶어요
본문
안녕하세요
버튼클릭시 선택된 라디오 값들의 합계를 보여주고 싶어요
<form id="myform" name="form">
<table>
<tr>
<td>1</td>
<td>가끔씩 몸이 저리고 쑤시며 감각이 마비된 느낌을 받는다.</td>
<td style="text-align: center">
<input type="radio" name="01" value="0">
</td>
<td>
<input type="radio" name="01" value="1">
</td>
<td>
<input type="radio" name="01" value="2">
</td>
<td>
<input type="radio" name="01" value="3">
</td>
</tr>
<tr>
<td>2</td>
<td>우울한 느낌을 받는다.</td>
<td style="text-align: center">
<input type="radio" name="02" value="0">
</td>
<td>
<input type="radio" name="02" value="1">
</td>
<td>
<input type="radio" name="02" value="2">
</td>
<td>
<input type="radio" name="02" value="3">
</td>
</tr>
<tr>
<tr>
<td colspan="2">합계 점수</td>
<td colspan="4">
<div class="total_sum"></div>
</td>
</tr>
</table>
<input type="button" value="button">자가심리검사</button>
</form>
답변 3
<input type="button" value="button">자가심리검사</button> ====> <button type="button">자가심리검사</button>
$("button").on("click", function() {
let sum = 0;
$.each($("input[type='radio']:checked"), function() {
sum += Number($(this).val()) || 0;
});
$(".total_sum").text(sum);
});
감사합니댜^^
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Jasko Sample Script </TITLE>
<style>
body,td {font-size:12px}
</style>
<!----- 1. 아래의 스크립트를 HEAD 부분에 붙여 넣으세요 -------->
<SCRIPT LANGUAGE="JavaScript">
<!--
function CheckChoice(whichbox) {
with (whichbox.form) {
if (whichbox.type == "radio") {
hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
hiddenpriorradio.value = eval(whichbox.price);
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else {
if (whichbox.checked == false) {
hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value);
}
else {
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value);
}
}
if (hiddentotal.value < 0) {
InitForm();
}
return(formatCurrency(hiddentotal.value));
}
}
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num)) num = "0";
cents = Math.floor((num*100+0.5)%100);
num = Math.floor((num*100+0.5)/100).toString();
if(cents < 10) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));
return (num + "원");
}
function InitForm() {
document.myform.total.value='0원';
document.myform.hiddentotal.value=0;
document.myform.hiddenpriorradio.value=0;
/* 항목을 추가하려면 아래의 방식으로 추가 할 수 있습니다
document.myform2.total.value='0원';
document.myform2.hiddentotal.value=0;
document.myform2.hiddenpriorradio.value=0;
document.myform2.hiddenpriorradio.value=0;
*/
for (xx=0; xx < document.myform.elements.length; xx++) {
if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio') {
document.myform.elements[xx].checked = false;
}
}
/*
for (xx=0; xx < document.myform2.elements.length; xx++) {
if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio') {
document.myform2.elements[xx].checked = false;
}
}
*/
}
//-->
</script>
<!------------------ 여기까지 --------------->
</HEAD>
<!----- 2. BODY 태그안에 아래의 이벤트 핸들러를 붙여 넣으세요 -->
<BODY onLoad="InitForm();" onreset="InitForm();">
<!----- 3. 원하는 위치에 아래와 같이 코드를 붙여 넣으세요 ------->
<p><B>메뉴를 선택 해 주세요</B>
<p>
<form method=POST name=myform>
스테이크 20,000원
<input type=checkbox name=Steak value=20000 onClick="this.form.total.value=CheckChoice(this);">
치킨 9,000원
<input type=checkbox name=Chicken value=9000 onClick="this.form.total.value=CheckChoice(this);">
돈까스 5,000원
<input type=checkbox name=don value=5000 onClick="this.form.total.value=CheckChoice(this);">
<br>
<br>
<hr>
<p>
<b>디저트를 신청 하세요 (한가지만 신청 가능합니다)</b>
<p>
아니요, 됐습니다
<input type=radio name=Sauce value=none price=0 onClick="this.form.total.value=CheckChoice(this);">
콜라 2,000원
<input type=radio name=Sauce value=coke price=2000 onClick="this.form.total.value=CheckChoice(this);">
주스 5,000원
<input type=radio name=Sauce value=juice price=5000 onClick="this.form.total.value=CheckChoice(this);">
아이스크림 3,000원
<input type=radio name=Sauce value=icecream price=3000 onClick="this.form.total.value=CheckChoice(this);">
<br>
<br>
<hr>
<p>
<input type=hidden name=hiddentotal value=0>
<input type=hidden name=hiddenpriorradio value=0>
총 금액은 : <input type=text name=total readonly> 입니다
</font>
</form>
<!------------------ 여기까지 -------------->
</BODY>
</HTML>
위 소스 응용해보세요~
감사합니댜^^
이렇게하면? 안될가용
라디오에 class="test_radio" 붙이고
const radios = document.querySelectorAll(".test_radio");
radios.forEach((e) => {
e.addEventListener("click", sumRadio);
});
function sumRadio() {
let sumTotal = 0;
radios.forEach((e) => {
if (e.checked) {
sumTotal += parseInt(e.value);
}
});
document.querySelector(".total_sum").innerHTML = sumTotal;
console.log(sumTotal);
}
감사합니댜^^
답변을 작성하시기 전에 로그인 해주세요.