javascript - 表单提交没有看到我的自定义复选框为 :checked

Question

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

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

如果您点击复选框，它就会起作用。但是，单击旁边的标签会导致在表单提交中未检测到检查，即使据我所知，它们的处理方式相同。

这是 Codepen

有什么想法吗？对我来说，这是其中一种应该有效的情况。

Answer 1

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

尝试一下，从标签中删除“for=...”属性，然后单击标签即可工作。这就是丑陋的解决方案。

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

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

我不确定，但我认为有一个更好的解决方案，但不确定复选框在取消/选中时是否响应“更改”事件。尝试一下，也许有效:

• 将复选框的“change”事件绑定(bind)到更新假复选框状态的函数
• 当您点击假复选框时，只需将真实复选框的“checked”属性设置为您想要的值，“更改”事件应该负责更新您的假复选框，这样您就不会重复代码(您不会标签上不需要任何 JavaScript)