버튼클릭시 선택된 라디오 값들의 합계를 보여주고 싶어요

버튼클릭시 선택된 라디오 값들의 합계를 보여주고 싶어요

QA

버튼클릭시 선택된 라디오 값들의 합계를 보여주고 싶어요

본문

안녕하세요

버튼클릭시 선택된 라디오 값들의 합계를 보여주고 싶어요

 

 


    <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);
    }
답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT