ラジオボタンの選択に基づく計算

Question

Webプロジェクトに平均スタックを使用しています。フロントエンドは、いくつかのユーザー入力を求める簡単な登録フォームです。たとえば、「購入した商品はいくつですか？」次の質問はラジオボタンです。この製品は大規模か小型か？私の質問は次のとおりです。注文のコストを計算する計算は、商品＃42 +（大きい場合は12）、または商品＃42 +（小さければ0）です。どのように私はjavascriptでこれをコード化する（私はバックエンドでノードを使用している）。言い換えれば、ユーザーがラジオボタンを選択したときに次の番号を追加する必要があり、数式に入力された商品の数をどのように渡すのかを計算コードに伝えるにはどうすればいいですか？私は小さな値にvalue = 1を割り当て、大きなラジオボタンにvalue = 2を割り当てることから始めました。この問題を回避すると、詳細をコーディングして式を更新できるので、一般的な例が役に立ちます。ありがとう

Answer 1

あなたは、クライアント側の計算をしたいと要素は次のようにHTML形式である場合：「製品カウント」のIDを持つ製品の数（のための入力と

<h1>Radio Buttons</h1> 
<form name="catch-radio" method="post"> 
    <div class="input"> 
    <span class="label">How many products are you buying?</span> 
    <input id="product-count" type="text" name="product_count" value="0"/> 
    <br/> 
    <span class="label">Is this product large or small?</span> 
    <br/> 
    <span class="label">Large</span> 
    <input type="radio" name="product-size" value="12" checked="checked"/> 
    <br/> 
    <span class="label">Small</span> 
    <input type="radio" name="product-size" value="0"/> 
    </div> 
</form> 
<div> 
    <h2>Cost of order:</h2> 
    <p id="calculation"></p> 
</div> 

）と商品サイズに対応するラジオボタン（ '商品サイズ'）を使用すると、フォームフィールドにイベントハンドラを追加することで、コストを計算してページの要素（ '計算'のID）に出力できますフォームに変更を登録し、次に計算を実行し、それに応じてページを更新する関数を呼び出すハンドラから次のようにします。

// Cost is the count of products purchased multipled by 42 then added 
// to 12 in the case that the product is large, and zero in the case 
// that the product is small 
function calculate_cost() { 
    let count = parseInt(document.getElementById('product-count').value); 
    if (count > 0) { 
     let size = 0; 
     for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
      if (document.getElementsByName('product-size')[i].checked) { 
        size = parseInt(document.getElementsByName('product-size')[i].value); 
        break; 
      } 
     } 

     let cost = count * 42 + size 
     document.getElementById('calculation').innerHTML = cost; 
    } 
} 

// handlers for form input change 
// call calculate_cost() on change 
// note that the text input is an on-change event but for radio buttons 
// an onclick handler is needed for each button 
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
    document.getElementsByName('product-size')[i].onclick = function() { 
     calculate_cost(); 
    } 
} 
document.getElementById('product-count').onchange = function() { 
    calculate_cost(); 
} 

私はここCodePenに本の迅速なデモを置く：http://codepen.io/P1xt/pen/yOKqXP/

を特に興味深いビットは、ラジオボタンのために、あなたが個別に各ボタンのクリックハンドラを追加する必要があるということです（と、それはクリックしないでなければなりません変更ハンドラを使用して、現在選択されているラジオを特定するには、それぞれのラジオが明示的にチェックされていることを確認する必要があります。

注：サーバー側で計算を行う場合は、フォームを送信してから、送信されたフォーム要素から製品数と製品サイズを収集して計算。

Answer 2

なぜラジオボタンの値として0と12を使用しないと、バックエンドは選択した値を追加するだけですか？