为什么这些复选框在 Safari 中有效，但在 Chrome 或 Firefox 中无效？

Question

我有一个网页，它根据用户选择的复选框创建动态 SVG。 每次用户从复选框列表中选中或取消选中公司时，SVG 都会更新。

我的 javascript 表单处理或 CSS 中的复选框有问题。 在 Mac 上，复选框在 Safari 中运行良好。 但不在 Chrome 或 Firefox 中：

https://www.versionmuseum.com/dh/checkboxes-dont-work

生产中的主要 CSS 文件可能是罪魁祸首，但我对 CSS 的了解不足以解决这个问题。 https://www.versionmuseum.com/assets/css/main.css

谢谢你的帮助！

Answer 1

问题实际上出在 html 上。 <label>元素的for=属性需要与<input>元素的id=元素匹配，以便单击 label 更改复选框 state。

例如，您有：

<label class="checkbox-label">
        <input class="checkbox" type="checkbox" name="company" value="Apple" checked="">
        <label for="human">Apple</label>
      </label>

但应该是：

<label class="checkbox-label">
    <input class="checkbox" type="checkbox" name="company" value="Apple" checked id="human-apple">
    <label for="human-apple">Apple</label>
</label>

当然要记住，页面上的 id 必须是唯一的。