チェックボックスの値でdivを更新する

Question

任意のチェックボックスを選択するとすぐにdivを更新できます。私は現在それを行うことができる、しかし、私はすべてのチェックボックスを選択する "すべてを選択"チェックボックスをチェックすると、私のチェックボックスからの情報で私のdivを更新しません。ここで

は、私がこれまで行っているものです： https://jsfiddle.net/3rxk043v/2/

マイHTML：

<div id="item-list"></div> 
<p>Total:<span class="total"></span></p> 
<label><input type="checkbox" id="selectall" class="c-check">select all</label> 
<label><input type="checkbox"class="selectcheckbox selectedtotal" name="items" value="Thomas Hobbes_100" data-amt="100">Thomas</label> 
<label><input type="checkbox"class="selectcheckbox selectedtotal" name="items" value="Jerry Xavier_150" data-amt="150">Jerry</label> 
<label><input type="checkbox"class="selectcheckbox selectedtotal" name="items" value="Sam Edith_80" data-amt="80">Sam</label> 

はJQuery：選択をクリックするdiv要素の更新を防止何かが

$('#selectall').change(function() { 
    $('.selectcheckbox').prop('checked', this.checked); 
}); 

$('input[name="items"]').change(function() { 
    var inputVal = $(this).val(); 
    var className = inputVal.replace(/ /g, '_'); 
    var inputArr = inputVal.split('_'); 

    if ($(this).prop('checked')) { 
     $("#item-list").append('<span class="span_' + className + '"><li>'+ inputArr[0] + '<p>$' + inputArr[1] + '</p></li></span>'); 
    } else { 
     $('.span_'+className).remove(); 
    } 
}); 

var $calculateselected = $('.selectedtotal').change(function() { 
    var v = 0; 
    $calculateselected.filter(':checked').each(function() { 
     v += $(this).data('amt'); 
    }) 

    var left = 2000-v; 
    $('.total').html(v); 
    $('.amtleft').html(left); 
}); 
$('.selectedtotal:checked').change(); 

ありますすべて？すべてのチェックボックスがチェックされますが、私の部門では何も更新されません。

更新： 「.trigger（ 'change'）;」を追加する場合は、私のコードで、「すべてを選択」チェックボックスを選択する前に1つのチェックボックス（たとえば、トーマス）を選択すると、トーマスが2回印刷されます。これを防ぐ方法を教えてください。

Answer 1

は、あなたのコードに次の行を追加します。

.trigger('change'); 

この

$('#selectall').change(function() { 
    $('.selectcheckbox').prop('checked', this.checked).trigger('change'); 
}); 

ようなものとされてすべてのものを維持します。

Answer 2

$('#selectall').change(function() { 
 
     $("#item-list").html(""); 
 
     $('.selectcheckbox').prop('checked', this.checked); 
 
     $('input[name="items"]').trigger("change"); 
 
}); 
 
    
 
$('input[name="items"]').change(function() { 
 
     var inputVal = $(this).val(); 
 
     var className = inputVal.replace(/ /g, '_'); 
 
     var inputArr = inputVal.split('_'); 
 

 
     if ($(this).is(':checked')) { //which checkbox was checked 
 
      $("#item-list").append('<span class="span_' + className + '"><li>'+ inputArr[0] + '<p>$' + inputArr[1] + '</p></li></span>'); 
 
     } else { 
 
      $('.span_'+className).remove(); 
 
     } 
 
    }); 
 

 
    var $calculateselected = $('.selectedtotal').change(function() { 
 
     var v = 0; 
 
     $calculateselected.filter(':checked').each(function() { 
 
      v += $(this).data('amt'); 
 
     }) 
 
     
 
     var left = 2000-v; 
 
     $('.total').html(v); 
 
     $('.amtleft').html(left); 
 
    }); 
 
    $('.selectedtotal:checked').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item-list"></div> 
 
<p> 
 
Total:<span class="total"></span> 
 
</p> 
 
<label><input type="checkbox" id="selectall" class="c-check">select all</label> 
 

 
<label><input type="checkbox"class="selectcheckbox selectedtotal" name="items" value="Thomas Hobbes_100" data-amt="100">Thomas</label> 
 

 
<label><input type="checkbox"class="selectcheckbox selectedtotal" name="items" value="Jerry Xavier_150" data-amt="150">Jerry</label> 
 

 
<label><input type="checkbox"class="selectcheckbox selectedtotal" name="items" value="Sam Edith_80" data-amt="80">Sam</label>