複数の選択されたチェックボックスでjavascriptを実行

Question

こんにちは私は現在、ユーザーがチェックした内容に基づいて数値を計算するWebアプリケーションを作成しています。

これはhereです。

リンクに行くと、最初にチェックボックスをチェックしてドロップダウンから値を入力し、2つの値を入力して出力を得ることがわかります。

私が助けが必要なのは、一度に複数のチェックボックスの値を計算できることです。

今では、複数を選択しても、一度に1つだけcheckboxの値を計算することができます。だから、基本的には、一度に複数のcheckboxを計算する方法を理解するのに役立つ必要があります。

私はjavacriptファイルの中にifというステートメントを使用していましたが、それは私に必要な結果を与えてくれません。

Answer 1

if文だけで、それ以外の場合にのみの変更を削除します。しかし、私はそのソリューションはスケーラビリティではなく、大きなアプリケーションは悪夢に変わる可能性があるということを言わなければなりません。

$（ "input：checked"）を使用することをおすすめします。それぞれ（function（）{}）;あなたがそれを保存したくない場合は、さらに問題や悪いコードを避けるためにクライアントに値を表示するだけです。あなたの考え方では、新しいフォームラベルを実装するたびに、それらをコピーして貼り付ける必要があります。

$(document).ready(function(){ 
    function check(){ 
     if($('#checkbox1').is(':checked')){ 
      var pokemonCount = parseInt($("#pokecount1").val()); 
      var candyCount = parseInt($("#candycount1").val()); 
      var reqCandy = parseInt($("#dropdown1 :selected").val()); 
      var evolveAmount = 0; 

      evolveAmount = Math.floor(((candyCount + pokemonCount) - 1)/(reqCandy)); 
      $("#p1").html(evolveAmount); 
      } 
     if($('#checkbox2').is(':checked')){ 
      var pokemonCount2 = parseInt($("#pokecount2").val()); 
      var candyCount2 = parseInt($("#candycount2").val()); 
      var reqCandy2 = parseInt($("#dropdown2 :selected").val()); 
      var evolveAmount2 = 0; 

      evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1)/(reqCandy2)); 
      $("#p2").html(evolveAmount2); 
      } 
     if ($('#checkbox3').is(':checked')){ 
      var pokemonCount3 = parseInt($("#pokecount3").val()); 
      var candyCount3 = parseInt($("#candycount3").val()); 
      var reqCandy3 = parseInt($("#dropdown3 :selected").val()); 
      var evolveAmount3 = 0; 

      evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1)/(reqCandy3)); 
      $("#p3").html(evolveAmount3); 
      } 
     } 
    $("#compute").click(function(){ 
     check() 
    }); 

}); 

Answer 2

場合のみ

$(document).ready(function(){ 
function check(){ 
    if($('#checkbox1').is(':checked')){ 
     var pokemonCount = parseInt($("#pokecount1").val()); 
     var candyCount = parseInt($("#candycount1").val()); 
     var reqCandy = parseInt($("#dropdown1 :selected").val()); 
     var evolveAmount = 0; 

     evolveAmount = Math.floor(((candyCount + pokemonCount) - 1)/(reqCandy)); 
     $("#p1").html(evolveAmount); 
     } 
    if($('#checkbox2').is(':checked')){ 
     var pokemonCount2 = parseInt($("#pokecount2").val()); 
     var candyCount2 = parseInt($("#candycount2").val()); 
     var reqCandy2 = parseInt($("#dropdown2 :selected").val()); 
     var evolveAmount2 = 0; 

     evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1)/(reqCandy2)); 
     $("#p2").html(evolveAmount2); 
     } 
    if ($('#checkbox3').is(':checked')){ 
     var pokemonCount3 = parseInt($("#pokecount3").val()); 
     var candyCount3 = parseInt($("#candycount3").val()); 
     var reqCandy3 = parseInt($("#dropdown3 :selected").val()); 
     var evolveAmount3 = 0; 

     evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1)/(reqCandy3)); 
     $("#p3").html(evolveAmount3); 
     } 
    } 
$("#compute").click(function(){ 
    check() 
}); 

}); 

Answer 3

にあなたはelseifを使用しましたので、最初のチェックボックスがチェックされている場合、それはそのコードを実行し、停止した場合にだけそうで削除します。あなたが唯一の3ののコードは、ステートメントが実行できるかどうかということを意味し、あなたのコードでelse ifステートメントを使用している

if(1.isChecked){ 

} 

if(2.isChecked){ 

} 

Answer 4

：あなたは、もし一連のブロックを必要としています。詳細情報here。

あなたは、このような単純なif文、とそれらを交換する必要があります。

$(document).ready(function(){ 
    function check(){ 
     if($('#checkbox1').is(':checked')){ 
      var pokemonCount = parseInt($("#pokecount1").val()); 
      var candyCount = parseInt($("#candycount1").val()); 
      var reqCandy = parseInt($("#dropdown1 :selected").val()); 
      var evolveAmount = 0; 

      evolveAmount = Math.floor(((candyCount + pokemonCount) - 1)/(reqCandy)); 
      $("#p1").html(evolveAmount); 
      } 
     if($('#checkbox2').is(':checked')){ 
      var pokemonCount2 = parseInt($("#pokecount2").val()); 
      var candyCount2 = parseInt($("#candycount2").val()); 
      var reqCandy2 = parseInt($("#dropdown2 :selected").val()); 
      var evolveAmount2 = 0; 

      evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1)/(reqCandy2)); 
      $("#p2").html(evolveAmount2); 
      } 
     if ($('#checkbox3').is(':checked')){ 
      var pokemonCount3 = parseInt($("#pokecount3").val()); 
      var candyCount3 = parseInt($("#candycount3").val()); 
      var reqCandy3 = parseInt($("#dropdown3 :selected").val()); 
      var evolveAmount3 = 0; 

      evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1)/(reqCandy3)); 
      $("#p3").html(evolveAmount3); 
      } 
     } 
    $("#compute").click(function(){ 
     check() 
    }); 

});