自动保存复选框节点答案

【问题标题】：Auto-save checkboxes node自动保存复选框节点
【发布时间】：2017-10-10 14:05:23
【问题描述】：

我想在用户选中或关闭复选框时自动保存表单。我正在考虑每次单击时使用 onchange 来触发，但考虑到我的页面上有超过 150 个复选框并且我需要它为每个单独的复选框触发，这似乎有点写不出来。

我的复选框代码是：

<div class="form-check">
 <label class="form-check-label">
  <input class="form-check-input" type="checkbox" value="">
  setting a
 </label> 
</div>

我尚未添加这些值，但它们将类似于 {{ user.settings.a.aa }}

这样做的最佳方法是什么？我在网上看了一圈，不确定哪些方法是好的和合适的。

【问题讨论】：

也许使用事件委托，这样您只需要一个侦听器即可处理所有复选框？

标签： jquery node.js mongodb express autosave

【解决方案1】：

首先，我想您应该有一种方法来识别 HTML 中的每个复选框。一个不错的选择是为每个属性设置一个不同的 id 属性（您也可以使用它为相应的 label 创建一个 for 属性）...

<div class="form-check">
  <label for="settinga" class="form-check-label">
    <input class="form-check-input" id="settinga" type="checkbox" value="">
    setting a
  </label> 
</div>
<div class="form-check">
  <label for="settingb" class="form-check-label">
    <input class="form-check-input" id="settingb" type="checkbox" value="">
    setting b
  </label> 
</div>
...........

那么您只需要生成一个 onchange 事件即可处理所有事件。当被触发时，对您的node.js 或express.js 后端文件进行ajax 调用，将复选框标识符和值作为参数发送，以便记录更改...

$('input.form-check-input').change(function() {

    var chkid = $(this).attr(id),
        chkvalue = $(this).val();

    $.ajax({
        type: 'POST',
        url: '/backend/recordcheckboxchange.js',
        data: { id: chkid, value: chkvalue },
        dataType: 'json',
        async: true,
        success: function(data) {
            // Your backend file can return a JSON with the result,
            // so you can alert in case of error. For example...
            if (data.result)
                alert('ERROR: Fail changing the checkbox value');
        }
    });
});

希望对你有帮助

【讨论】：

谢谢，我打算在早上尝试实现这个。我想知道如果模型将在 /models/user.js 然后 user.settings.it.settinga 下找到，那么快速路线会是什么样子