2009-08-24 9 views
4

많은 라디오 버튼이있는 그룹이 많은 양식을 만들려고합니다. 사용자가 버튼을 선택하면 선택한 각 라디오 버튼 값의 합계를 계산하여이 합계를 사용자에게 표시하려고합니다.jQuery를 사용하여 라디오 버튼 값의 합계를 계산하는 방법은 무엇입니까?

계산을 수행 할 jQuery 용 플러그인을 찾았습니다.이 플러그인은 버튼의 name 속성을 사용하여 계산합니다. 예를 들어, 이름이 sum 인 모든 버튼의 값을 합산합니다.

지금까지이 두 가지 설정 방법을 시도했습니다. 첫 번째 방법에서는 각 그룹에 선택한 값의 합계를 저장하는 숨겨진 필드를 만듭니다.이 숨겨진 필드는 값을 얻지 만 문제는 사용자가 버튼을 선택할 때 전체 값이 업데이트되지 않는다는 것입니다. 값이 업데이트 곳

이 코드에서
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <script src="jquery.js" type="text/javascript"> 
     </script> 
     <script src="calc.js" type="text/javascript"> 
     </script> 
     <script src="calc_f.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
      function DisplayPrice(price){ 
       $('#spn_Price').val(price); 
      } 
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <input type="hidden" id="spn_Price" name="sum" value=""> 
      <br> 
      <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"> 
      <br> 
      <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"> 
      <br> 
      <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly"> 
     </form> 
    </body> 
</html> 

이 이름 totalSum하여 입력 태그이지만, 버튼을 변경하는 경우는 업데이트되지 않습니다 : 내 코드는 다음과 같습니다.

앞에서 설명한 것처럼 숨겨진 필드를 사용하는 이유는 각 그룹의 부분합을 유지하는 것입니다. 이름은 sum이며 플러그인에 다른 사람에게 추가되어야 함을 나타냅니다.

이것이 올바른 방법인지 알지 못합니다. 사용자가 버튼을 클릭하면 sum으로 이름 속성을 변경하려고했지만 그 중 하나도 작동하지 않습니다! 여기

는 플러그인 주소 : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

내가 어떻게 할 수 있습니까?

답변

21

플러그인 슈무 긴. 당신의 온 클릭을 제거하고 이것을 시도 :

$("input[type=radio]").click(function() { 
    var total = 0; 
    $("input[type=radio]:checked").each(function() { 
     total += parseFloat($(this).val()); 
    }); 

    $("#totalSum").val(total); 
}); 
+3

+1. 이것이 프레임 워크를 배우기 전에 언어의 기본 원리를 배우는 것이 중요한 이유입니다. 이 특별한 문제에 플러그인을 가져올 이유가 전혀 없습니다. –

+0

감사하지만 작동하지 않습니다! – datisdesign

+1

죄송합니다, 작동, 나쁘다! :) – datisdesign

2

제목 없음 문서

<script type="text/javascript"> 
     function DisplayPrice(price){ 
      var val1 = 0; 
      for(i = 0; i < document.form1.price.length; i++){ 
       if(document.form1.price[i].checked == true){ 
        val1 = document.form1.price[i].value; 
       } 
      } 

      var val2 = 0; 
      for(i = 0; i < document.form2.price2.length; i++){ 
       if(document.form2.price2[i].checked == true){ 
        val2 = document.form2.price2[i].value; 
       } 
      } 

      var sum=parseInt(val1) + parseInt(val2); 
      document.getElementById('totalSum').value=sum; 
     } 
    </script> 
</head> 
<body> 
    Choose a number:<br> 
    <form name="form1" id="form1" runat="server"> 
     <br> 
     <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159 
     <br> 
     <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259 
     <br> 
    </form> 

    Choose another number:<br> 
    <form name="form2" id="form2" runat="server"> 
     <br> 
     <input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345 
     <br> 
     <input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87 
     <br> 
    </form> 
    <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly"> 


</body> 

위의 코드는 dinamically 두 그룹 모두에서 확인 된 값을 요약합니다. parseInt는 정수로 변환합니다. 그렇지 않으면 parseFloat를 사용하십시오.

+0

은 나를 위해 일했습니다. 감사합니다. –

관련 문제