表单单选按钮的默认 onClick 操作是什么？答案

【问题标题】：What is the default onClick action for a Form Radio Button?表单单选按钮的默认 onClick 操作是什么？
【发布时间】：2011-07-14 03:18:42
【问题描述】：

我有一个位于 IE 上的应用程序。警察在他们的车辆中使用它来运行标签、获取事件信息等。我正在对这个应用程序进行一些急需的更新，但我遇到了一个单选按钮的障碍。

为了可用性，官员们希望文本和输入字段更大。当我把它们变大时，单选按钮显然没有增长。我在 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/label-only.html 找到了一个 jQuery 替代品，我使用的是 Label-Only 格式。如果选择了该选项，它不会显示实际的单选按钮，而是突出显示标签。

无论如何，我的页面上都可以使用它，但是当我按下按钮时，它们实际上就消失了。该应用程序是 Javascript、VBScript、表单、XML 和 XSL 的大杂烩，到目前为止，我一直无法找到对脚本的公开调用，否则会使按钮消失。

所以我的最终问题是，单选按钮的默认操作是什么？我希望我可以创建一个新函数并使用 onClick 操作调用它。这是最后的手段，如果它不起作用，我将不得不寻找替代方案，但我感觉我可能会遇到类似的问题。

我在http://www.myvigilanttechs.com/Radio/mobInfPA_vehicleinq.htm 发布了一个演示，这是应用程序中的实际页面。第一组单选按钮是真实的，底部的第二组是我尝试使用格式更好的代码进行修复。

有人愿意试一试吗？

【问题讨论】：

A.如果使用 jquery 导致问题，也许尝试 YUI。 B. 如果这是一个特定于 IE 的问题（看起来确实如此），请尝试使用没有任何已知问题的 IE 插件。
默认操作是将单选框显示为选中状态。这是你想要的吗？
是的，我知道它会将其显示为已选中，但如何将其放入可由 onClick 操作调用的函数中？我希望在找到有问题的脚本之前，我至少可以让单选按钮留在页面上。
为什么不使用普通的 HTML <label> 元素而不是花哨的 JQuery（或其他框架）标签系统？浏览器会自动为您处理它，以便单击标签与单击单选按钮（或复选框）具有相同的效果。 rachaelarnold.com/dev/archive/…
如果用普通的html完成，圆圈是否仍然可以隐藏并且标签的格式与CSS相同？

标签： javascript jquery forms internet-explorer radio-button

【解决方案1】：

编辑

基于 OP 上的 cmets，可以使用 visibility: hidden 隐藏单选按钮。在下面的演示中为 .bigButton input 添加样式规则按要求工作。

您可以使用类似以下的方法为单选按钮添加标签，然后根据是否选中包含的单选按钮来更改标签的背景颜色。

此外，标签增加了按钮的目标区域。

<style type="text/css">

.bigButton {
  border: 1px solid blue;
  padding: 20px;
  display: inline-block;
  font-size: 200%;
}

.bigButton input {
  visibility: hidden;
}

</style>

<form action="">
  <label for="radio0" class="bigButton">Option 0
    <input type="radio" id="radio0" name="option0" onclick="bigFocus(this);">
  </label>
  <br>
  <label for="radio1" class="bigButton">Option 1
    <input type="radio" id="radio1" name="option0" onclick="bigFocus(this);">
  </label>
</form>


<script type="text/javascript">

function bigFocus(el) {
  var els = document.getElementsByName(el.name);
  var i = els.length;
  var node;
  while (i--) {
    node = els[i];
    node.parentNode.style.backgroundColor = node.checked? 'red' : '';
  }
}
</script>

当然你需要为生产整理一下，这只是为了展示总体策略。

【讨论】：

【解决方案2】：

好的，我想通了。我确信这是页面上所有其他脚本的问题，我部分正确。

首先，我使用了 2 个不同的 jQuery 库。一个用于工具提示，另一个用于单选按钮。使用 noConflict(true) 语句，我能够解决该部分。但是，由于我都在同一个函数语句中进行了初始化，我发现工具提示语句的搜索范围有点广。它正在搜索所有输入表单控件。当我将其简化为控件的文本时，单选按钮开始正常工作。

我现在无法访问测试笔记本电脑，但当我这样做时，我会发布代码。

感谢大家的建议。

【讨论】：