且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

即使列表中的一个未被选中,如何取消选中一个复选框呢?

更新时间:2022-06-20 02:57:35

我会这样做:

$('.selectall').on('change', function(e) {
    var $inputs = $('#checkboxlist input[type=checkbox]');
    if(e.originalEvent === undefined) {
        var allChecked = true;
        $inputs.each(function(){
            allChecked = allChecked && this.checked;
        });
        this.checked = allChecked;
    } else {
        $inputs.prop('checked', this.checked);
    }
});

$('#checkboxlist input[type=checkbox]').on('change', function(){
    $('.selectall').trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">
    <label><input type="checkbox" name="sample"/>checkbox1</label><br/>
    <label><input type="checkbox" name="sample"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample"/>checkbox4</label><br />
    
</div>

A将e.isTrigger替换为e.originalEvent === undefined. Wolff的建议为

swapped e.isTrigger for e.originalEvent === undefined per A. Wolff's suggestion as commented below.