JavaScript - 選択されたチェックボックスに基づいて出力の値を変更しました

Question

私はJavaScriptをかなり使い慣れていて、チェックボックスのように3つの価格オプションをフォームに記載しています。最初の2つの両方が選択されている場合は、合計金額を一定額だけ落としたいと思います。

私のコードは、この問題のコードに基づいています。 Javascript checkboxes incorrect calculating

彼らは日付変数によって基準値をリセットします。私は、それらの2つのボックスがチェックされている場合、ベースを負の値に設定する関数があれば、それは私が望むものを達成するだろうと仮定します。私はまた、出力が、これが発生したときに '月ごとに保存'（x）の追加タグを持つことを望みます。

しかし、変数をチェックボックスに関連付ける方法がわかりません。how to change the value of a variable based on a select option:selectedとしてjqueryを使用する必要がありますか？

Answer 1

を

<form> 

<input type="checkbox" id="first" /><label for="first">First Box</label> <br> 
<input type="checkbox" id="second" /><label for="second">First Box</label> <br> 

<input type="text" id="output" value="5.00"/> 

</form> 

をrecalculate()は以前の質問の機能です。その機能には、あなたがあなたの合計を取得した後に、割引を適用するには、これを追加します。

$("#output").html(sum + " Save $" + discount + " per month"); 

Answer 2

if (document.getElementById('checkBox1').checked && document.getElementById('checkBox2').checked) { 
    // Change the price 
} 

Answer 3

この問題に対処する方法はたくさんあります。私がそれに入る前に思い出させるように、決してクライアント側で「計算価格」のようなことをしないでください。つまり、価格を計算してユーザーを表示することができますが、実際の計算はサーバー側で行う必要があります（クライアントはフォームの送信を調整して操作できます）。

チェックボックスの結果を集計して結果を表示する簡単な例を作成しました。あなたの目的に合うようにこのコードを操作する方法はたくさんあります。私はjQueryを使いましたが、この問題の他の興味深いオプションがあります（例えば、KnockoutJSをチェックしてください）。

<input type="checkbox" class="adjust one" data-value="1.00" id="so1" /> <label for="so1">$1.00</label> <br/> 
<input type="checkbox" class="adjust two" data-value="2.00" id="so2" /> <label for="so2">$2.00</label><br/> 
<input type="checkbox" class="adjust one" data-value="3.00" id="so3" /> <label for="so3">$3.00</label> 

<p> 
    Total: <span class="total"></span> 
</p> 

次に、（jQueryライブラリとともに）次のJavaScriptを組み込みたいとします。

var total; 

var calculateTotal = function() { 
    total = 0.0; 
    $('input[type="checkbox"]:checked').each(function() { 
     total += parseFloat($(this).data('value')); 
    }); 
    $('.total').text(total); 
}; 

$(document).ready(function() { 

    $('input[type="checkbox"]').live('change', function() { 
    calculateTotal(); 
    }); 

    calculateTotal(); //do it for initial price 
}); 

calculateTotal（）は「チェック」セレクタに一致するチェックボックス（タイプチェックボックスの入力）に基づいて合計を計算します。次に、各チェックボックスからデータ属性「値」を引き出し、その数値に基づいて合計を計算します。あなたの問題のロジックは異なる可能性がありますが、単にcalculateTotalを調整するだけでこれを処理する必要があります。最後に、calculateTotal関数は、チェックボックスが '変更'されたとき（および最初に一度）呼び出されます。

うまくいけば、これはあなたを稼働させる上で大きな助けになるはずです。ここにはJSFiddleライブデモンストレーションがあります。

Answer 4

Jqueryは必須ではありませんが、常にプラスです。あなたはJavaScriptを学んでいるので、まだフレームワークを使用しないことをお勧めします。

まずフォーム（あなたのフォームがどのように見えるかを私たちに示した場合、それが良いでしょう）必要があります：私はあなたがあなたを変更していると仮定している今のjavascript

<script type="text/javascript"> 
    var first = document.getElementById("first"); 
    var second = document.getElementById("second"); 

    first.onchange = function() { 
    if (this.checked == true) { 
     document.getElementById("output").value = "new Value"; 
    }else { 
     document.getElementById("output").value = "other Value"; 
    } 
    } 

    ... the same can be done for 'second' .... 
</script>