为不确定复选框设置自定义初始值只有在单击后才能工作

我一直在基于这篇CSS技巧文章中的演示实现一个三态复选框。然而，我做了一个小的更改，我还通过$(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演示来演示这种行为。我尝试了许多不同的方法来定义初始值，但似乎无法使其将不确定字段视为需要添加的内容。

我能做什么？