ラジオボタンの計算

Question

特定の製品用のラジオボタンがあります。私はクリックした各ラジオボタンの合計を追加するフォームの下部に合計ボックスを持つことができるようにしたいと思っています。私はこれがラジオボタンの値を介して、その後いくつかのJavaScriptを使用して行うことができます知っている。

問題は、以下のコードにどのように値が必要なので、私はそのメソッドを使うことができないと思います。フォーム送信から電子メールを受け取ると、ユーザーが選択したオプションを確認できます。

JavaScriptを使用せずに、または値を使用しないでください。

<input class="radio" type="radio" name="keystage1yr1" value="Paper" /> <span>&#163;25</span> 

<input class="radio" type="radio" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr2" value="Paper" /> <span>&#163;25</span> 

<input class="radio" type="radio" name="keystage1yr2" value="CD" /> <span>&#163;25 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr2" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" name="keystage1save" value="Paper" /> <span>&#163;47.50</span> 

<input class="radio" type="radio" name="keystage1save" value="CD" /> <span>&#163;47.50 excl VAT</span> 

<input class="radio" type="radio" name="keystage1save" value="Paper & CD" /> <span>&#163;75 excl</span> 

それは、各ラジオボタンにprice="20"などのようなものを追加して、これらを合算することはできますか？

EDIT

@Jamiec答えは余分な「データ・価格」felidを追加し、いくつかのJavaScriptを使用して、最大総額完璧にうまくいきました。

私はJamiecコードで遊んだ後、チェックされたがチェックされていないラジオボタンの合計が増えていることに気付きました。

name="keystage1yr1"から一つだけのラジオボタンを name="keystage1yr2"から 一つだけのラジオボタンを

を選択することができます。しかしname="keystage1save"から任意のラジオボタンは、その後、任意のラジオを選択した場合に選択することができ

：私はまた、次の処理を行い、いくつかのJavaScriptを持っていたよう選択されているname="keystage1yr1"およびname="keystage1yr2"のボタンは選択解除されます。

@Jamiecによって提供されるjavascriptでは、name="keystage1save"が選択されている場合、合計にはname="keystage1yr1"とname="keystage1yr2"の値が残っているという問題があります。私はいくつかの並べ替えを使用して問題

Answer 1

Javascriptがない、ない - 確かにない。

はい、Javascriptを使用して次の各ラジオのスパン内のテキストを解析 - はい、Javascriptを使用して、生量を含む無線に余分な属性を追加するが、かなりトリッキー

- 非常に難しいことではありません

余分な属性（好ましくはdata-amount）を追加すると、jQueryのようなライブラリを使用して、はい - easy peasy lemon squeezy！

---

jQueryを使用した例です。

<input class="radio" type="radio" name="keystage1yr1" value="Paper" data-price="25" /> <span>&#163;25</span> 

は次のように合計フィールドを追加します：

<input id="total" type="text"> 

し、次のコードを使用して、あなたのラジオのように各の拡張

。

var values = {}; // index to store the selection from each named group of radio's 

$('input:radio').change(function(){ 
    var name = $(this).attr('name'); 
    values[name] = parseFloat($(this).data('price')); 
    var total = 0.0; 
    $.each(values,function(i,e){ 
     total += e; 
    }); 
    $('#total').val(total.toFixed(2)); 
}); 

ライブ例：http://jsfiddle.net/UL2JP/

---

編集、上記のコードのみがチェックされ、それらのチェックボックスを追加しない、残念ながら、それは以前javascriptオブジェクトvaluesで選択されているものをキャッシュします。コードを使用してチェックボックスの選択を解除した場合は、選択した内容を再計算する必要があります。

このコードの更新、あなたのコメントで記述するものを行うために表示されます。

var values = {}; 

$('input[name="keystage1save"]').click(function(){ 
    $('input:radio:not([name="keystage1save"])').prop('checked',false); 
    values = {}; 
}); 

$('input:radio').change(function(){ 
    var name = $(this).attr('name'); 
    values[name] = parseFloat($(this).data('price')); 
    var total = 0.0; 
    $.each(values,function(i,e){ 
     total += e; 
    }); 
    $('#total').val(total.toFixed(2)); 
}); 

ライブ例：http://jsfiddle.net/UL2JP/1/

---

編集2：ちょうど考え、必要はありません実際に選択した値をキャッシュするには、オンザフライで計算するほうが速いでしょう：

$('input[name="keystage1save"]').click(function(){ 
    $('input:radio:not([name="keystage1save"])').prop('checked',false); 
}); 

$('input:radio').change(function(){ 
    var total = 0.0; 
    $('input:radio:checked').each(function(){ 
      total += parseFloat($(this).data('price')); 
    }); 
    $('#total').val(total.toFixed(2)); 
}); 

ライブ例：http://jsfiddle.net/UL2JP/2/あなたは3つのことを行うことができ

Answer 2

あなたがこれを構築する場合に、固定キャッシュ内の値を格納しないように選択

EDIT2 @Jamiec更新答えているラジオボタンから合計を計算し、それを必要としますサーバー側のコードの、それを使用して合計価格を計算する

Answer 3

：

• 使用してAJAXは、EN、それが適切にサーバーサイド
• は、ラジオボタンと値のIDを持つ配列を作成してください、とのonClick検索値を加算して合計に加えます
• 値を格納するためにID属性を誤って使用し、いくつかのJSを書き込んで追加します。例えば＃val1_1＃val2_4など（推奨されません）

あなたは私がこれらのオプションのいずれかにeleborateしたいと思います。

AJAXを使用したくない場合は、オプション2にすることをお勧めします。これはかなりエレガントです。

HTML：

<input class="radio" type="radio" id="ks1p" name="keystage1yr1" value="Paper" /> <span>&#163;25</span> 

<input class="radio" type="radio" id="ks1c" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span> 

<input class="radio" type="radio" id="ks1cp" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" id="ks2p" name="keystage1yr2" value="Paper" /> <span>&#163;25</span> 

//etc.. 

JS：

var prices= new Array(); 
prices["ks1p"]=1; 
prices["ks1c"]=2; 
prices["ks1cp"]=3; 
//etc 
var lastPrice = new Array(); 
lastPrice ["keystage1yr1"]=0; 
lastPrice ["keystage1yr2"]=0; 
//etc 
var totalPrice = 0; 
$('.radio').click(function(){ 
    var id = $(this).attr('id'); 
    var name= $(this).attr('name'); 
    if(lastPrice[name] != 0){ 
    totalPrice = totalPrice - lastPrice[name]; 
    } 
    lastPrice[name] = prices[id]; 
    totalPrice = totalPrice + prices[id]; 
    alert(totalPrice); 
}); 

はフィドル：http://jsfiddle.net/nggLr/