Php JS checkbox.checked与手动检查

我有一个页面，由php分页为每页100个结果，每个页面旁边都有复选框。我有三个功能：一个选择全部，一个保存已检查的内容，一个恢复已检查的内容

我不明白为什么我的切换功能不能与其他两个一起工作。 如果单击执行切换的“全选”，则不会保存选中的值； 但是，如果我手动单击它们，它们会在分页过程中保存

我假设我必须按照persischeckboxcheckboxes[I]的思路做一些事情。选中切换函数的最后一行-我尝试了，但没有成功；有人能解释一下原因吗

以编程方式更改选中值时，不会触发单击或更改事件

因为您使用jQuery标记了您的问题，所以我将演示如何使用一些jQuery代码

从您的代码中不清楚您是如何进行持久存储的，或者您的HTML结构是什么，因此代码将展示一种通用方法

不过，有一点建议：我强烈建议您从结构中删除样式代码，并使用CSS，避免内联事件处理。几乎所有您想要完成的事情都可以从HTML之外更干净地完成

我将起诉一个带有多个复选框的表单，其中第一个复选框将更改其他复选框的状态

HTML:

这段代码将设置一个函数，使其在每次复选框更改时运行，与persistCheckBox方法相对应

接下来，切换功能的等效项：

$('#all').change(function (e) {
    var checked = e.target.checked;
    console.log('changed checkall box: ', checked);
    checkboxes = document.getElementsByName('multi_mag[]');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = checked;
        $(checkboxes[i]).change();
    }
});

每当主checbox改变其状态时，就会执行它。所有复选框都会被迭代，它们的值会被更改，并且会触发更改事件，这会导致每个复选框都运行上述函数

您可以将此方法应用于清理后的代码，并且应该维护持久性

---

示例检查控制台中的活动日志。

这段代码可以选中/取消选中复选框，并将触发任何相关事件

$'input[type=checkbox]'。触发“单击”

---

它可能会有帮助，我通过添加我通过添加持久复选框[I]来修复这个问题；切换到切换函数的最后一行@MasterAM我感谢您的批评，并将使用它们优化我的代码。我也非常感谢您提供的JQuery解决方案。

您是否在上述复选框的更改事件上做了什么？因为以编程方式检查不会触发更改事件。我们可以看一段HTML来帮助解决您的问题吗？@sirtophamhat不确定HTML是否符合以下内容：这是一个有效的解决方案。不过，事件的好处是，它们可能有多个侦听器。如果您有一个更复杂的场景，当选中一个框时会发生更多的事情，那么自然的做法是添加适当的事件侦听器。直接调用您现在知道的处理程序可能会破坏您的代码，如果您将向该事件添加更多附加行为。到那时，你可能会忘记你使用了这个技巧，而找出到底是什么错可能并不是那么简单。

<form id="boxes">
    <input type="checkbox" id="all" name="all" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    ...
    <input type="checkbox" name="multi_mag[]" class="normal" />
</form>

$('#boxes').delegate('.normal', 'change', function (e) {
    console.log('changed', e.target.checked);
});

$('#all').change(function (e) {
    var checked = e.target.checked;
    console.log('changed checkall box: ', checked);
    checkboxes = document.getElementsByName('multi_mag[]');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = checked;
        $(checkboxes[i]).change();
    }
});