2

私はJavascriptを初めて使用するので、助けていただければ幸いです。それが何かを変えるなら、私もjQueryライブラリを使用しています。

私が必要としているのは、最初checkboxにチェックマークを付けた場合、出力は100kcalである必要があり、両方にチェックマークを付けた場合、合計で300kcalになるはずです。私の問題は、チェックを外すと変数が再び追加されることです。

HTML：

<input type=checkbox onchange="myFunction(100)" value="scrambledEggs">Scrambled Eggs</input>
<input type=checkbox onchange="myFunction(200)" value="bacon">Bacon</input>
<p id="output">0kcal</p>

JS：

var result = 0;    
function myFunction(x) {    
    if (this.checked) {    
        result -= x;   
        document.getElementById("output").innerHTML = result + "kcal";    
    } 
    else {
        result += x;
        document.getElementById("output").innerHTML = result + "kcal";
    }
}
4

4 に答える 4

3

まず、jQueryを使用している場合は、onchange属性の代わりにjQueryを使用してイベントハンドラーをアタッチする必要があります。次に、inputタグは自動的に閉じます。現在のHTMLは無効です。最後に、属性を使用しdataて、オプションのkcal値を格納できます。

<label><input type="checkbox" class="food-option" data-kcals="100" value="scrambledEggs" />Scrambled Eggs</label>
<label><input type="checkbox" class="food-option" data-kcals="200" value="bacon" />Bacon</label>
<p id="output"><span>0</span>kcal</p>

次に、jQueryを使用してイベントを添付し、チェックされたすべての値を合計して表示できます。

$('.food-option').change(function() {
    var totalKcals = 0;
    $('.food-option:checked').each(function() {
       totalKcals += parseInt($(this).data('kcals'), 10); 
    });
    $('#output span').text(totalKcals);
});

フィドルの例

于 2013-01-26T12:41:11.767 に答える
2

あなたの場合、あなたはこのコードを使うことができます：

HTML

<input type="checkbox" value="scrambledEggs" data-kcal="100">scrambledEggs</input>
<input type="checkbox" value="bacon" data-kcal="200">bacon</input>
<p id="output"> 0 kcal</p>

それはdata-kcalあなたのkcal値のコンテナであるタグを持っています。

JS

var result = 0;

$('input[type="checkbox"]').on("change", function() {
    if($(this).attr('checked'))
    {
        result += parseInt($(this).attr("data-kcal"));
    }else{
        result -= ($(this).attr("data-kcal"));
    }
    $("#output").text(result + " kcal");
});

また、このjsFiddleでどのように機能するかを確認できます。

于 2013-01-26T12:49:17.040 に答える
1

HTML は次のようになります。

<input type='checkbox' value="100">Scrambled Eggs  </input>
<input type='checkbox' value="200"> Bacon </input>
<p id="output">0kcal </p>

次に、JQuery をより適切に使用し、記述されるコードを減らし、可読性を高めます。以下のコードはあなたのニーズを満たします。

$('input[type=checkbox]').change(function (e) { //This will trigger every check/uncheck event for any input of type CheckBox.
    var res = 0;
    $('input[type=checkbox]:checked').each(function() { //Loop through every checked checkbox.
       res += parseInt($(this).val());  //Sum it's value.
    });
    $('#output').text(res); //Add the final result to your span.
});

デモ

于 2013-01-26T13:03:27.270 に答える
0

クリックされた要素を関数に渡します...

HTML

<input type=checkbox onchange="myFunction(this, 200)" value="bacon">Bacon</input>

JAVASCRIPT

function myFunction(element, value) {
    console.log(element.checked);
}

デモについては、このJSFiddleを確認してください。

それを行うためのより良い方法はこのようなものです...

HTML

<div id="checkboxes">
    <input type=checkbox value="bacon">Bacon</input>
    <input type=checkbox value="Other">Other</input>
</div>
<p id="output">0kcal</p>

JAVASCRIPT

var checkboxes = document.getElementById("checkboxes");

checkboxes.onchange = function (e) {
    alert("Target: " +  e.target.value + " Checked: " + e.target.checked);
};

デモについては、このフィドルを参照してください。

于 2013-01-26T12:45:39.973 に答える