javascript - 使用复选框中的值更新 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:

$('#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();

单击全选时是否有任何因素阻止 div 更新？所有复选框都被选中，但我的 div 中没有任何更新。

更新:如果我要添加“.trigger('change');”对于我的代码，当我在选择“全选”复选框之前先选择一个复选框(例如 Thomas)时，Thomas 将被打印两次。如何防止这种情况发生？

Answer 1

$('#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>