0

我正在尝试使用 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>
4

1 回答 1

0

来自Ryan Fait 网站上使用 CSS 和 JavaScript 设置复选框和单选按钮的样式：

它是如何工作的？

简而言之，JavaScript 会查找每个带有 class="styled" 的表单元素；隐藏真实的表单元素；在元素旁边粘贴一个带有 CSS 类的 span 标签；最后，鼠标事件被添加到处理单击输入时所经历的视觉阶段的跨度中。

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

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

onChange 和其他 JavaScript 事件

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

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

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

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

于 2013-07-18T01:01:23.797 回答