Question

我一直致力于根据此CSS-tricks文章中提供的演示实现三态复选框。但是，我做了一个小小的更改，我还通过$(el).val()设置了输入值，因此0不确定并且检查了1：

inputs.on('click.tristate', function () {
    el = $(this);
    switch (el.data('checked')) {

        // unchecked, going indeterminate
        case -1:
            el.data('checked', 0);
            el.val(0) 
            el.prop('indeterminate', true);
            break;

            // indeterminate, going checked
        case 0:
            el.data('checked', 1);
            el.val(1); 
            el.prop('indeterminate', false);
            el.prop('checked', true);
            break;

            // checked, going unchecked
        default:
            el.data('checked', -1);
            el.prop('indeterminate', false);
            el.prop('checked', false);
    }
});

这可以按预期工作 - 当点击它在状态之间切换时，当你发送表单时，它发送不确定为0并检查为1（并且取消选中它根本不发送）。

现在我在设置初始值方面遇到了麻烦。我添加了这个：

inputs.each(function () {
    if ($(this).data('checked') === 0) {
        this.indeterminate = true;
        this.value = 0;
        return;
    }
    if (this.checked) $(this).data('checked', 1);
    else              $(this).data('checked', -1);
});

可视化工作，但是如果您运行$('form').serialize()，您会看到它将不确定的输入视为未选中（即不添加它）。如果您单击几次并执行完整循环，则添加它。什么给出了什么？

我做了一个JSFiddle Demo来证明这种行为。我尝试了许多不同的方法来定义初始值，但我似乎无法将其视为需要添加的不确定字段。

我该怎么办？

Answer 1

我想我发现的HTML属性是一个BUG＆gt; Here

<input type="checkbox" name="cb2" value='0' data-checked='0' checked="false" class="tristate-checkbox" />

关于您的问题有explanation复选框值和序列化。

通常以单一方式序列化句柄复选框：checked = false等于无显示，checked = true等于显示内容。

jQuery序列化非常模仿标准表单的形式在被追加到查询字符串之前由浏览器序列化 POST请求中的正文。未选中的复选框不包括在内浏览器，这很有意义，因为它们有一个布尔状态

为不确定复选框设置自定义初始值仅在单击后才起作用

1 个答案: