单选按钮的设置和验证似乎是许多网站管理员设置时最困难的表单字段。实际上，这些字段的设置是所有表单字段中最容易验证的，因为单选按钮设置了一个值，只有在提交表单时才需要测试该值。

单选按钮的困难在于至少有两个字段需要放在表单上，通常更多的字段需要放在一起，并作为一个组进行测试。如果为按钮使用正确的命名约定和布局，则不会有任何问题。

设置单选按钮组

当在表单上使用单选按钮时，首先要看的是如何对按钮进行编码，以便它们作为单选按钮正常工作。我们想要的行为是一次只选择一个按钮；选择一个按钮后，将自动取消选择以前选择的任何按钮。

这里的解决方案是为组中的所有单选按钮提供相同的名称，但不同的值。下面是单选按钮本身使用的代码。

<input type="radio" name="group1" id="r1" value="1" /><input type="radio" name="group1" id="r2" value="2" /><input type="radio" name="group1" id="r3" value="3" />

为一个表单创建多组单选按钮也很简单。您只需为第二组单选按钮提供与第一组不同的名称。

“名称”字段确定特定按钮所属的组。提交表单时为特定组传递的值将是提交表单时所选组中按钮的值。

描述每个按钮

为了让填写表单的人了解我们组中每个单选按钮的功能，我们需要提供每个按钮的说明。实现这一点的最简单方法是在按钮后立即以文本形式提供描述。

但是，仅使用纯文本存在几个问题：

1. 文本可能在视觉上与单选按钮相关联，但对于一些使用屏幕阅读器的人来说可能并不清楚。
2. 在大多数使用单选按钮的用户界面中，与按钮关联的文本是可单击的，并且可以选择其关联的单选按钮。在我们这里的例子中，文本将不会以这种方式工作，除非文本专门与按钮关联。

将文本与单选按钮关联

要将文本与其对应的单选按钮相关联，以便单击文本将选择该按钮，我们需要通过在标签中包围整个按钮及其关联文本来进一步添加每个按钮的代码。

以下是其中一个按钮的完整HTML格式：

<input type="radio" name="group1" id="r1" value="1" /><label for="r1"> button one</label>

由于标签标签的for参数中引用的id名称的单选按钮实际上包含在标签本身中，因此for和id参数在某些浏览器中是冗余的。然而，他们的浏览器往往不够智能，无法识别嵌套，因此值得使用它们来最大限度地增加代码运行的浏览器数量。

这就完成了单选按钮本身的编码。最后一步是使用JavaScript设置单选按钮验证。

设置单选按钮验证

单选按钮组的验证可能并不明显，但一旦您知道如何验证，就很简单了。

以下功能将验证是否已选择组中的一个单选按钮：

// Radio Button Validation// copyright Stephen Chapman, 15th Nov 2004,14th Sep 2005// you may copy this function but please keep the copyright notice with itfunction valButton(btn) { var cnt = -1; for (var i=btn.length-1; i > -1; i--) { if (btn[i].checked) {cnt = i; i = -1;} } if (cnt > -1) return btn[cnt].value; else return null;}

要使用上述函数，请从表单验证例程中调用它，并将单选按钮组名传递给它。它将返回所选组中按钮的值，如果组中未选择任何按钮，则返回空值。

例如，下面是执行单选按钮验证的代码：

var btn = valButton(form.group1);if (btn == null) alert('No radio button selected');else alert('Button value ' + btn + ' selected');

此代码包含在表单上的validate（或submit）按钮上附加的onClick事件调用的函数中。

对整个表单的引用作为参数传递到函数中，函数使用“form”参数来引用完整表单。因此，为了验证名为group1的单选按钮组，我们将form.group1传递给valButton函数。

您将需要的所有单选按钮组都可以使用上述步骤进行处理。