表单提交未将我的自定义复选框视为：已选中

Question

我一直在Codepen上构建自定义表单组件集，但这些复选框无法正常工作。

我将prop至true和checked属性设置为"checked"。您可以使用开发人员工具检查元素以检查这些元素。

如果您点击 复选框，则可以使用。但是点击它旁边的标签会导致在表单提交中没有检测到检查，即使它们的处理方式与我所说的相同。

这里是Codepen

有什么想法吗？对我而言，这是其中一个应该正常工作的情况。

Answer 1

我认为问题在于您通过javascript切换复选框已检查属性，但标签已经切换，因此您将其切换两次并最终得到与之前相同的值。

试试这个，删除＆＃34; for = ...＆＃34;您的标签属性和标签上的点击将起作用。这是丑陋的解决方案。

更好的解决方案，将您的点击回调更改为：

• 当您点击虚假复选框时：更改虚假复选框状态并切换真实复选框的值
• 当您点击标签时：仅更改虚假复选框状态，不要切换复选框的值，因为它已被切换

我不确定，但我认为这是一个更好的解决方案，但不确定该复选框是否会响应更改＆＃39;取消/检查时的事件。尝试一下，也许它有效：

• 绑定复选框＆＃34;＆＃34;更改＆＃34;事件到更新假复选框状态的函数
• 当您点击假复选框时，只需设置属性＆＃34;选中＆＃34;你需要的真正的复选框，＆＃39;更改＆＃39;活动应该注意更新您的假复选框，这样您就不会重复代码（您的标签上不需要任何javascript）

Answer 2

http://www.w3.org/TR/html5/forms.html#concept-input-value-dirty-flag

当用户与表单控件交互时，它变得“脏”。＆＃34;这基本上意味着其值/检查与其checked / value HTML属性取消关联。您的JavaScript代码操纵HTML属性，但不操纵实际的检查。