チェックボックス選択の合計値を計算する

チェックボックスを使用して5つの異なる選択肢の組み合わせを選択することに基づいて合計値を計算する最良の方法を理解しようとしています。 100 チェックボックス2 - - 125 チェックボックス3から150 チェックボックス4から175 チェックボックス5から200チェックボックス選択の合計値を計算する

チェックボックス1：チェックボックスの

ここ

<input type="checkbox" value="Value 1" name="Value1" id="Value1">Value 1 
<input type="checkbox" value="Value 2" name="Value2" id="Value2">Value 2 
<input type="checkbox" value="Value 3" name="Value3" id="Value1">Value 3 
<input type="checkbox" value="Value 4" name="Value4" id="Value1">Value 4 
<input type="checkbox" value="Value 5" name="Value5" id="Value1">Value 5 
<input type="checkbox" value="Total Value" name="TotalValue" 
id="TotalValue">Total Value

れるサンプル数値：ここでのコード例でありますだから私の目標は、チェックボックスの選択に基づいてTotalValueの数値を考え出すことです。たとえば、チェックボックス2とチェックボックス4が選択されている場合、合計値は300になります。したがって、ユーザーは1つのチェックボックスまたは任意のチェックボックスの組み合わせを選択できます。私はおそらくjavascriptを使用してそれを行うことができますが、コードは非常に扱いにくく長くなります。そこで、jQueryを使用して効率的に行う方法があるのだろうかと思っていました。どんな助けでも大歓迎です。ありがとうございました。

出典

2017-10-29 dr1054

[研究努力は、スタックオーバーフローのユーザーに期待されてどのくらい？]（https://meta.stackoverflow.com/a/261593/3082296）答えを – adiga

を次のように。次のように実装できます。

$('document').ready(function() { 
 
    $("#mainDiv input:checkbox").on("change", function(){ 
 
    var totalValue = 0; 
 
    $('#mainDiv :checked').each(function() { 
 
     totalValue += parseInt(($(this).val())); 
 
    }); 
 
    
 
    $("#TotalValue").val(totalValue) 
 
    }) 
 
    
 

 
});

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<div id="mainDiv"> 
 
    <input type="checkbox" value="100" name="Value1" id="Value1">Value 1 
 
    <input type="checkbox" value="125" name="Value2" id="Value2">Value 2 
 
    <input type="checkbox" value="150" name="Value3" id="Value1">Value 3 
 
    <input type="checkbox" value="175" name="Value4" id="Value1">Value 4 
 
    <input type="checkbox" value="200" name="Value5" id="Value1">Value 5 
 
</div> 
 
Total Value :<input value="" name="TotalValue" id="TotalValue" />

出典

2017-10-29 18:35:44 hasan

これは完璧です！そんなにhsnblありがとうございます。とても有難い！ – dr1054

@ dr1054あなたの歓迎です:)この答えが問題を解決した場合、人々が質問が解決されたと理解するのを助けるための答えを受け入れることを検討してください。 – hasan

こんにちは...の直前に関数を終了する必要がありますか、それともセクションに入れる必要がありますか？実際のコードにコードを適用しましたが、チェックボックスをクリックすると、合計値のテキストボックスに値が入力されません。ありがとう – dr1054

てみてくださいあなたは$("#mainDiv input:checkbox")とターゲットのdiv内のすべてのチェックボックスを選択し、それらのいずれかが変更されたときにチェック入力の合計値を計算する.on("change")イベントを使用することができます

$('document').ready(function() { 
 

 
    $('#TotalValue').on('click', function() { 
 
    var sList = 0; 
 

 
    $('#mainDiv :checked').each(function() { 
 
     sList += parseInt(($(this).val())); 
 
    }); 
 

 

 
    console.log(sList); 
 

 
    }) 
 

 
});

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<div id="mainDiv"> 
 
    <input type="checkbox" value="1" name="Value1" id="Value1">Value 1 
 
    <input type="checkbox" value="2" name="Value2" id="Value2">Value 2 
 
    <input type="checkbox" value="3" name="Value3" id="Value1">Value 3 
 
    <input type="checkbox" value="4" name="Value4" id="Value1">Value 4 
 
    <input type="checkbox" value="5" name="Value5" id="Value1">Value 5 
 
</div> 
 
<button value="Total Value" name="TotalValue" id="TotalValue">Total Value</button>

出典

2017-10-29 17:47:47

Hi..thanks 。私は間違いを犯したと思う。実際には、合計値は、選択されたチェックボックスに基づいて合計値を保持するテキストボックス（チェックボックスではありません）でなければなりません。また、計算する数値をどのように取得するのですか？ありがとう。 – dr1054

いつでも!!!!!!!! –

チェックボックス選択の合計値を計算する

答えて

関連する問題