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明确地说它“隐藏了真正的表单元素;用一个CSS类标记了一个span标签”......所以你实际上是在点击Ryan代码所插入的<span>;隐藏真实的复选框。

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

onChange和其他JavaScript事件

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

您需要从我的脚本

中调用它们

从onClick=代码中取出<input>;将代码添加到他的代码中 - 你必须弄清楚你的代码中要调用哪些代码，因为我看到你在onClicks上做了不同的事情。

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

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

1 个答案:

您需要从我的脚本