Question

我想在用户选择打开或关闭复选框时自动保存表单。我想在每次点击时都使用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 }}

这样做的最佳方法是什么？我在网上四处看看，并不确定哪种方法被认为是正确的。

Answer 1

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

<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');
        }
    });
});

我希望它有所帮助

自动保存复选框节点

1 个答案: