复选框表单字段名称在表单提交淘汰js时不提交

checkbox form field name is not submitted when form submits knockout js

本文关键字：js 淘汰 提交 表单提交 表单 字段 复选框      更新时间：2023-09-26

当用户提交表单时，我试图获取所有表单字段，问题是复选框字段，即当选中复选框时，名称将提交到服务器，但如果未选中，则复选框不会提交到服务器。我使用的是最新版本。以下是我的工作代码：

<form data-bind="submit: submitForm">
    <input type="checkbox" name="checkboxTest" data-bind="checked : value" />
    <input type="text" name="textTest" value="Test" />
    <button type="submit"> Submit</button>
</form>

这是我的ViewModel：

function viewModel(data)
    {
        self.value = ko.observable(true);
        // when user submit the form
        self.submitForm =  function(fields)
        {
            var dataparams = $(fields).serialize();
            // The form fields name are showing here
            console.log(dataparams);
        }
    }
    ko.applyBindings(new viewModel);

有人能告诉我如何使用knockoutjs取消选中复选框吗？提前谢谢。

jQuery序列化表单中成功的控件。只有"成功的控件"被序列化到字符串。checkboxes和radio buttons的值（类型为"radio"或"checkbox"的输入）只有在选中时才会包括在内，这是有意义的，因为它们是布尔状态。如果你想在对象中包含所有输入，你可以手动添加它们。或者，如果您想在数据库中存储true或false的值，而不是使用checkbox，您可以使用值为0和1的<select>（YES，NO）

这里有一个例子：

HTML:

<form data-bind="submit: submitForm, with: form">
  <input type="checkbox" name="checkboxTest" data-bind="checked : value" />
  <input type="text" name="textTest" value="Test" />
  <button type="submit"> Submit</button>
</form>

JS:

function viewModel() {
  this.value = ko.observable(true);
}
function parentViewModel() {
  var self = this;
  self.form = ko.observable();
  // when user submit the form
  self.submitForm = function() {
    var dataparams = ko.toJSON(self.form);
    // The form fields name are showing here
    console.log(dataparams);
  };
}
var vm = new parentViewModel();
vm.form = new viewModel();
ko.applyBindings(vm);

然后您应该获得JSON中的属性。在这种情况下，{"value": true}或{"value": false}

工作示例

相关文章：