Question

我有一个位于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发布了一个演示，这是应用中的实际页面。第一组单选按钮是真实的，底部的第二组是我尝试使用更好的格式化代码进行修复。

任何人都想小心翼翼地抓住这个？

Answer 1

修改

根据对OP的评论，可以使用 visibility：hidden 隐藏单选按钮。在下面的演示中为 .bigButton输入添加样式规则可以根据需要使用。

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

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

<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>

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

Answer 2

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

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

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

感谢大家的建议。

Form Radio Button的默认onClick操作是什么？

2 个答案:

修改