我一直在基于这篇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演示来演示这种行为。我尝试了许多不同的方法来定义初始值,但似乎无法使其将不确定字段视为需要添加的内容。
我能做什么?
我想我在HTML属性中发现的是一个BUG>。
<input type="checkbox" name="cb2" value='0' data-checked='0' checked="false" class="tristate-checkbox" />
这里有一个关于复选框值和序列化问题的解释。
通常通过一种方式序列化handle复选框:checked=false等于不显示,checked=true等于显示某些内容。
jQuery serialize非常模仿标准表单在附加到查询字符串之前由浏览器序列化,或者请求中的POST正文。未选中的复选框不包括在浏览器,这很有意义,因为它们有一个布尔状态