チェックボックスの値を集めて配列に入れます

Question

以下のJSコードを確認してください。私の目標は、選択したすべてのチェックボックス属性の合計を「価格データ」とし、<h4 "id="totalDisplay"の内部に合計金額をappend()で表示することです。

また、各チェックボックスの値の配列コレクションを追加する必要があります。これは102と103です。チェックボックスの選択ごとにすべてが更新されます。私はh4の表示値と配列のコレクション値の両方をリアルタイムでユーザーのチェックボックスの選択ごとに更新されることを意味します。 valueCollections変数は配列値を格納するためのものです。私はjQueryを初めて使用しています。そのため、実際に合計値を格納して配列の値を格納する方法がわかりません。ご質問があればお尋ねください。前もって感謝します。

$(document).ready(function() { 
 
    var valueCollections[]; 
 
    $(".checkbox").on("click", function() { 
 
    $('[price-data]').each(function() { 
 
     $("#totalDisplay").append("<span class=\"label label-warning\">Total price: 70.50</span>"); 
 
    }); 
 
    $("#submitData").on("click", function() { 
 
     $.post("/Controller/Method", { 
 
     vales: valueCollections 
 
     }).done(function(data) { 
 
     //whatever goes here 
 
     }); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <label><input type="checkbox" price-data="50.50" value="102">option1</label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label><input type="checkbox" price-data="20" value="103">option2</label> 
 
</div> 
 
<h4 id="totalDisplay"></h4> 
 
<button class="btn btn-default" id="submitData">Submit</button>

Answer 1

checkboxがchecked和である場合は、別のarrayと価値のprice-dataを収集することができます価格とショーはcheckboxをチェックした。以下を参照：

var valueCollections = []; 
 
var priceCollections = []; 
 

 
$("input[type='checkbox']").on("click", function() { 
 
    var priceData = $(this).attr('price-data'); 
 
    var val = $(this).val(); 
 

 
    // get checked 
 

 
    if ($(this).is(':checked')) { 
 
    valueCollections.push(val); // push if checked 
 
    priceCollections.push(priceData); 
 
    } else { 
 
    valueCollections.splice($.inArray(val, valueCollections), 1); // remove if not checked 
 
    priceCollections.splice($.inArray(priceData, priceCollections), 1); 
 
    } 
 

 
    // sum array 
 

 
    var sum = eval(priceCollections.join("+")) 
 
    $('#totalDisplay').html(sum); 
 

 
    console.log(valueCollections); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4 id="totalDisplay"> 
 
</h4> 
 
<div class="checkbox"> 
 
    <label><input type="checkbox" price-data="50.50" value="102">option1</label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label><input type="checkbox" price-data="20" value="103">option2</label> 
 
</div> 
 

 
<button class="btn btn-default" id="submitData">Submit</button>

Answer 2

私はa fiddle hereを作ったが、あなたはそれを改善する必要があり、例えば：

HTML：

​​

のJs：

var id = ""; 
for(i=1 ; i<8 ;i++){ 
    id="checkbox_"+i; 
    $('.checkbox-set').append('<input type="checkbox" id="'+ id +'" value="Click on me"/> <label for="'+id+'">Click on me</label> <br/> '); 
} 
var selected = []; 


$('input[type="checkbox"]').change(function() { 
    if(this.checked) {   
     $(this).each(function(){ 
     selected.push($(this).attr('id')); 
     $("#result").html(selected); 
     }); 
    } 
    if(!this.checked) { 
     const index = selected.indexOf($(this).attr('id')); 
     var tt= selected.splice(index, 1); 
      $("#result").html(selected); 
    } 
}) 

を

それは、私はあなたがそれに参加し、あなたが必要なものを達成するためのいくつかの努力を行う願って、ちょうどサンプルではなく、完全なコードです:)