javascript - 如何在jquery中操作具有所有条件的复选框

Question

我想要一个能够处理以下场景的 jquery 条件 -

1) 选中一些复选框

2) 选中所有复选框

我希望它们都在一个循环中。目前，我有以下代码仅选择所有复选框 -

$('.check-all').click(function() {
    var selector = $(this).is(':checked') ? ':not(:checked)' : ':checked';
    var ids = [];

    $('#chkall input[type="checkbox"]' + selector).each(function() {
        $(this).trigger('click');
        ids.push($(this).attr('value'));
    });
    var id = [];
    id = JSON.stringify(ids);
    document.cookie = "ids="+id;
});

并将我的 PHP 代码中的复选框视为 -

echo '<ul class="list-unstyled" id="chkall">';
foreach ($contacts as $contact) {
    echo '<li>
    <div class="checkbox" id="checkboxes">
        <label><input type="checkbox" class="case" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
    </div>
</li>';
}

那么，我应该如何在一个循环中处理这两种情况？检查完成后我发送了一个 cookie。

Answer 1

我找到了一个解决方案，现在按照以下方式执行此操作 -

PHP 代码 -

echo '<ul class="list-unstyled" id="chkall">';
foreach ($contacts as $contact) {
    echo '<li>
    <div class="checkbox" id="checkboxes" onclick="getID('.$contact['cust_id'].')">
        <label><input type="checkbox" class="check-all" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
    </div>
</li>';
}

<div class="checkbox" onclick="getID('0')">
    <?= Html::checkbox(null, false, [
        'id' => 'selectall',
        'label' => 'Select all',
        'class' => 'check-all',
        ]);?>
    </div>
</div>

相应的脚本是 -

var ids = [];
function getID(id) {
    var checkboxlist = document.getElementsByName('case');
    var itr = 0, checkedFlag = 0, uncheckedFlag = 0;
    var inputElements = document.getElementsByClassName('check-all');
    if (id == 0) {
        $(".check-all").prop("checked", $("#selectall").prop("checked"))
    }
    else {
        for (var i = 0; inputElements[i]; ++i) {
            if (inputElements[i].value == id) {
                if (inputElements[i].checked == true) {
                    inputElements[i].checked = false;
                    break;
                }
                else {
                    inputElements[i].checked = true;
                    break;
                }
            }
        }
        while (itr < checkboxlist.length) {
            if (checkboxlist[itr].checked == true) {
                checkedFlag++;
            }
            else {
                $("#selectall").prop("indeterminate", true);
                uncheckedFlag++;
            }
            itr++;
        }
        if (checkedFlag == checkboxlist.length) {
            $("#selectall").prop("indeterminate", false);
            $("#selectall").prop("checked", true);
        }
        if (uncheckedFlag == checkboxlist.length) {
            $("#selectall").prop("indeterminate", false);
            $("#selectall").prop("checked", false);
        }
    }
}

就是这样!!!