单击自定义复选框不会运行关联的 onClick 函数

Question

我正在尝试使用 Ryan Fait 的自定义复选框。这些比标准复选框更具可读性，但单击它们不会运行相关的onClick 函数。任何建议将被认真考虑。我的代码的相关部分如下：

<p style="font-family:arial; font-size:large">

<input type="checkbox" class="styled" id="level-0" type="radio" value="0"
onClick="count();"> &nbsp;0 (ages 5-7)&nbsp;&nbsp;

<input type="checkbox" class="styled" id="level-1" type="radio" value="1"
onClick="count();" checked>&nbsp;1 (beginner)&nbsp;&nbsp;

<input type="checkbox" class="styled" id="level-2" type="radio" value="2"
onClick="count();" checked>&nbsp;2 (easy)&nbsp;&nbsp;

<input type="checkbox" class="styled" id="level-3" type="radio" value="3"
onClick="count();" checked>&nbsp;3 (intermediate)&nbsp;&nbsp;

<input type="checkbox" class="styled" id="level-4" type="radio" value="4"
onClick="count();"> &nbsp;4 (challenging)&nbsp;&nbsp;

<input type="checkbox" class="styled" id="level-5" type="radio" value="5"
onClick="count();"> &nbsp;5 (hard)&nbsp;&nbsp;

<input type="checkbox" class="styled" id="level-all" type="radio" value="6"
onClick="all_levels();"> &nbsp;All&nbsp;&nbsp;

<input id="available" type="button" style="background-color:white; border:2px;
font-family:arial; font-size:large" value="??"> </p> <br>

Answer 1

来自 Ryan Fait 网站上的Styling Checkboxes and Radio Buttons With CSS and JavaScript：

它是如何工作的？

简而言之，JavaScript 会查找每个表单元素 class="styled" 就可以了；隐藏真实的表单元素；粘贴跨度标签 在元素旁边有一个 CSS 类；最后，鼠标事件 被添加到处理视觉阶段表单输入的跨度中 当它们被点击时通过。

您的内联 onClick 处理程序未触发，因为您的复选框实际上并未被单击。 Ryan 明确表示它“隐藏了真正的表单元素；将 span 标签与 CSS 类粘贴在一起”......所以您实际上是在点击 Ryan 的代码插入的 <span>；真正的复选框是隐藏的。

在文章的后面，Ryan 直截了当地说：

onChange 和其他 JavaScript 事件

此脚本利用 JavaScript 的 onChange 和其他事件。因为 如果要添加更多功能，这些事件只能使用一次 对于一个事件，您需要从我的脚本中调用它们。

您需要从我的脚本中调用它们

从<input> 标签中取出您的onClick=；将你的代码添加到他的代码中——你必须弄清楚从他的代码中调用你的代码的哪一部分，因为我看到你做的事情与你的 onClicks 不同。

您还应该将style="..." 从您的标签中取出并使用样式表，但这是一个单独的问题。