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

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

我正在将

prop

设置为

true

，将

checked

属性设置为

“checked”

。您可以使用开发人员工具来检查这些元素

如果在复选框上单击，则它会工作。但是，单击它旁边的标签会导致在表单提交中未检测到支票，即使据我所知，它们的处理方式相同

这里是

有什么想法吗？对我来说，这应该是一种工作环境。

---

当用户与表单控件交互时，它会变得“脏”。这基本上意味着它的值/检查性与它的

checked

/

value

HTML属性断开关联。您的JavaScript代码操纵HTML属性，但不操纵实际的检查性。

我认为问题在于，您正在通过JavaScript切换checkbox checked属性，但标签已经切换了该属性，因此您切换了两次，最后得到的值与之前相同

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

更好的解决方案是，将单击回调更改为：

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

我不确定，但我认为有更好的解决方案，但不确定取消/选中复选框时复选框是否响应“更改”事件。试试看，也许它能起作用：

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

---

你有代码笔的链接吗？用一些代码回答这个问题会容易得多。它现在就在那里！在这里发布之前，您应该尝试使用最少的代码创建一个示例。这通常会导致问题在发布之前得到解决。如果没有，并且这里有太多的代码要发布，那么在发布之前，您可能没有花足够的时间来识别问题。