0

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

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

我假设我必须按照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);
   }
4

3 回答 3

1

以编程方式更改值时，既不触发click也不触发事件。changechecked

既然您用 标记了您的问题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();
    }
});

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

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

示例jsFiddle（检查控制台的活动日志）。

于 2013-09-04T01:21:43.130 回答
0

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

$('input[type=checkbox]').trigger('click');

它可能会有所帮助

于 2013-09-04T01:24:00.390 回答
0

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

于 2013-09-04T13:42:24.113 回答