테스트 사이트 - 개발 중인 베타 버전입니다

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

케빈박 3년 전 조회 4,089

안녕하세요

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

 

 

</p>

<p>    <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></p>

<p>    </form></p>

<p> </p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트

<input type="button" value="button">자가심리검사</button> ====> <button type="button">자가심리검사</button>

 

</p>

<p>$("button").on("click", function() {

    let sum = 0;

    $.each($("input[type='radio']:checked"), function() {

        sum += Number($(this).val()) || 0;

    });

    $(".total_sum").text(sum);

});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

케빈박
3년 전
감사합니댜^^

댓글을 작성하려면 로그인이 필요합니다.

이렇게하면? 안될가용

라디오에  class="test_radio" 붙이고

</p>

<p>const radios = document.querySelectorAll(".test_radio");</p>

<p>    radios.forEach((e) => {</p>

<p>        e.addEventListener("click", sumRadio);</p>

<p>    });</p>

<p>    function sumRadio() {</p>

<p>        let sumTotal = 0;</p>

<p>        radios.forEach((e) => {</p>

<p>            if (e.checked) {</p>

<p>                sumTotal += parseInt(e.value);</p>

<p>            }</p>

<p>        });</p>

<p>        document.querySelector(".total_sum").innerHTML = sumTotal;</p>

<p>        console.log(sumTotal);</p>

<p>    }</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

케빈박
3년 전
감사합니댜^^

댓글을 작성하려면 로그인이 필요합니다.

</p>

<p><!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);">







<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);">









<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></p>

<p>

 

위 소스 응용해보세요~

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

케빈박
3년 전
감사합니댜^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인