ラジオボタンの値を1回だけ合計する方法は？

私は、複数のラジオボタンから値を合計し、このコードを使用しています：ラジオボタンの値を1回だけ合計する方法は？

$(document).ready(function(){ 
    var total = 50000; 
    $("input[type=radio]").change(function(){ 
     $("input[type=radio]:checked").each(function(){ 
      if (isNaN($(this).val())) { 
       total = total; 
      } 
      else 
       total += parseFloat($(this).val()); 
     }); 
     $(".price_amount").text(total); 
    }); 
});

問題は、ユーザーがグループ内のラジオボタンをクリックし、そのグループ内の別のラジオボタンを選択すると、新しい値がされるということですこれに加えて、私は合計値に値の1つを追加したいだけです。このグループでは例えば

：初めてのユーザーが、5000は合計金額に加算されますが、彼は番目のオプションに変更した場合、+ 5000 15000に追加されますseconedラジオを選択

<div> 
    <input type="radio" value="0" name="markuptype" class="pack_radio" checked="checked"><h4>W3C Valid HTML 4.01</h4> 
    <span class="pack_price">-</span> 
</div> 
<div> 
    <input type="radio" value="5000" name="markuptype" class="pack_radio"><h4>W3C Valid XHTML 1.0 Transitional</h4> 
    <span class="pack_price">5,000</span> 
</div> 
<div> 
    <input type="radio" value="15000" name="markuptype" class="pack_radio"><h4>W3C Valid XHTML 1.0 Strict</h4> 
    <span class="pack_price">15,000</span> 
</div>

合計、私はそれらの1つだけをしたい！

出典

2009-09-01 datisdesign

問題がtotal VARがchangeコールバックのスコープ外で宣言されていることを、私には、そうです。これにより、changeコールバックのクロージャにtotalという変数が含まれるようになります。そのため、それ以降のchangeコールでは値が保持されます。

このコールバック内totalを宣言した場合、あなたは問題ないはずです。

$("input[type=radio]").change(function(){ 
    var total = 5000; // => declared locally, so initialized at each change. 
    $("input[type=radio]:checked").each(function(){ 
     if (isNaN($(this).val())) { 
      total = total; 
     } 
     else 
      total += parseFloat($(this).val()); 
    }); 
    $(".price_amount").text(total); 
});

出典

2009-09-01 11:34:44 xtofl

あなたの助けに感謝:) – datisdesign

私はこの最近のデモンストレーションの簡単な例を書いていますが（jQueryを使用せずに）

新しい値を追加する前に、加算した値を保存してから合計値から減算するだけです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title>Radio Test</title> 
</head> 
<body> 
    <form action="" method="get" id="myForm"> 
     <fieldset id="myRadioGroup"> 
      <legend>Radios</legend> 
      <div> 
       <label> <input type="radio" value="0" name="add" checked> 0 </label> 
      </div> 
      <div> 
       <label> <input type="radio" value="20" name="add"> 20 </label> 
      </div> 
      <div> 
       <label> <input type="radio" value="30" name="add"> 30 </label> 
      </div> 

     </fieldset> 
     <div id="total">45</div> 
    </form> 

    <script type="text/javascript"> 
     (function() { 
      var group = document.forms.myForm.elements.add; 
      var currentValue = function currentValue() { 
       for (var i = 0, j = group.length; i < j; i++) { 
        if (group[i].checked) { 
         return Number(group[i].value); 
        } 
       } 
      }; 
      var oldValue = currentValue(); 
      var total = document.getElementById('total').firstChild; 

      var update = function update() { 
       var current = currentValue(); 
       total.data = Number(total.data) - oldValue + current; 
       oldValue = current; 
      }; 

      for (var i = 0, j = group.length; i < j; i++) { 
       group[i].onchange = update; 
      } 
     }()); 
    </script> 
</body> 
</html>

出典

2009-09-01 11:30:27 Quentin

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

</head> 
<body> 
    <div> 
     <input type="radio" value="0" name="markuptype" class="pack_radio" checked="checked"><h4> 
      W3C Valid HTML 4.01</h4> 
     <span class="pack_price">-</span> 
    </div> 
    <div> 
     <input type="radio" value="5000" name="markuptype" class="pack_radio"><h4> 
      W3C Valid XHTML 1.0 Transitional</h4> 
     <span class="pack_price">5,000</span> 
    </div> 
    <div> 
     <input type="radio" value="15000" name="markuptype" class="pack_radio"><h4> 
      W3C Valid XHTML 1.0 Strict</h4> 
     <span class="pack_price">15,000</span> 
    </div> 
</body> 

<script type="text/javascript"> 

    $(function() 
    { 

     $('input:radio').change(function() 
     { 
      var total = 50000;   
      $('input:radio:checked').each(function() 
      { 
       if (isNaN(this.value)) 
        total = total; 
       else 
        total += parseFloat(this.value); 
      }); 

      $('.price_amount').text(total); 
     }); 
    }); 

</script> 

</html>

出典

2009-09-01 13:54:42 Raghav

ラジオボタンの値を1回だけ合計する方法は？

答えて

関連する問題