Question

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

我不明白为什么我的切换功能不适用于其他两个。
如果我单击全选（执行切换（）），则不会保存选中的值; 但是，如果我手动点击它们，它们会在分页中保存。

我假设我必须按照 persistCheckBox（checkboxes [i] .checked）的方式做一些事情到我的切换功能的最后一行 - 我尝试了它并且它不起作用; 有人可以解释原因吗？

   function toggle(source) {
       checkboxes = document.getElementsByName('multi_mag[]');
       for (var i = 0, n = checkboxes.length; i < n; i++) {
           checkboxes[i].checked = source.checked;
       }
   }

   function restorePersistedCheckBoxes() {
       var aStatus = getPersistedCheckStatus();
       for (var i = 0; i < aStatus.length; i++) {
           var aPair = aStatus[i].split(':');
           var el = document.getElementById(aPair[0]);
           if (el) {
               el.checked = aPair[1] == '1';
           }
       }
   }

   function persistCheckBox(el) {
       var found = false;
       var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
       var aStatus = getPersistedCheckStatus();
       for (var i = 0; i < aStatus.length; i++) {
           var aPair = aStatus[i].split(':');
           if (aPair[0] == el.id) {
               // State for this checkbox was already present; replace it
               aStatus[i] = currentStateFragment;
               found = true;
               break;
           }
       }
       if (!found) {
           // State for this checkbox wasn't present; add it
           aStatus.push(currentStateFragment);
       }
       // Now that the array has our info stored, persist it
       setPersistedCheckStatus(aStatus);
   }

Answer 1

以编程方式更改click值时，不会触发change和checked事件。

由于您使用jQuery标记了您的问题，我将演示使用一些jQuery代码。

从您的代码中不清楚您如何执行持久存储或HTML结构是什么，因此代码将显示一般方法。

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

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

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>

使用Javascript：

在这个例子中，所有'普通'复选框都有一些共同的属性（在这种情况下，我决定了一个类），允许事件委托。

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

此代码设置了每次复选框更改时运行的功能，与您的persistCheckBox()方法相对应。

接下来，相当于您的toggle()功能：

$('#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改变其状态时执行。迭代所有复选框，更改它们的值并触发更改事件，这将导致每个复选框运行上述功能。

您可以将此方法应用于（已清理的）代码，并且应保持持久性。

示例jsFiddle（检查控制台是否有活动日志）。

Answer 2

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

$（ '输入[类型=复选框]'）触发（ '点击'）;

它可能有所帮助

Answer 3

我通过添加“修复此问题”来添加“persistCheckBox（checkboxes [i]）;”到toggle（）函数的最后一行。 @MasterAM我感谢您的批评，并将使用它们来优化我的代码。我也很欣赏你提供的JQuery解决方案。

JS checkbox.checked vs手动检查

3 个答案: