Question

今天带着虹吸陷入困境。

对于特定用例，似乎无法将表单值序列化为JSON：一组复选框，每个复选框都带有一个单独的值，但所有复选框的名称都相同。

<input type="checkbox" name="cats" value="Whiskey">
<input type="checkbox" name="cats" value="Tango">
<input type="checkbox" name="cats" value="Cash">

我覆盖了复选框阅读器，为我提供了复选框的值：

Backbone.Syphon.InputReaders.register('checkbox', function(el){
        return el.val();  //fetch value not the boolean
    });

现在我得到的是最后一个选定的值，而不是预期的所有选定值的数组。

有没有人处理过这个问题？

Answer 1

经过几个小时的努力，我做了一些发现：

API文档和带注释的代码库与我下载的实际最新代码不匹配。事实上它有点不同。
检查密钥（输入的名称属性）以确定如何序列化其数据。

借助这些知识，我可以通过执行以下三项操作将我的复选框值作为一个值数组：

注册特定于复选框的输入阅读器以返回值属性。
注册复选框验证程序，仅收集复选框中的值。
将括号添加到name属性以指示数组输入。

 Backbone.Syphon.InputReaders.register('checkbox', function (el) {
    return el.val();
 });

 Backbone.Syphon.KeyAssignmentValidators.register("checkbox", function ($el, key, value) {
    return $el.prop("checked");
 });

<input type="checkbox" name="cats[]" value="Whiskey">
<input type="checkbox" name="cats[]" value="Tango">
<input type="checkbox" name="cats[]" value="Cash">

Answer 2

dbrin答案的一个问题是正常的复选框（不是数组）会受到影响所以你得到字符串值'on'带有选中的输入，布尔值 false 带有未选中状态投入。我找到了这个解决方案：

Backbone.Syphon.InputReaders.register('checkbox', function ($el) {
  return ($el.attr('name').endsWith('[]')) ? $el.val() : $el.prop("checked");
});

Backbone.Syphon.KeyAssignmentValidators.register("checkbox", function ($el, key, value) {
  return ($el.attr('name').endsWith('[]')) ? $el.prop("checked") : true;
});

Backbone.syphon处理多个复选框

2 个答案: