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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将以下内容添加到您的代码中：

.trigger('change');

就像这样

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

并保持原样。

使用复选框中的值更新div

2 个答案: