测试html网页单选按钮_如何验证网页上的单选按钮

测试html网页单选按钮

The setup and validation of radio buttons appears to be the form field that gives many webmasters the most difficulty in setting up. In actual fact the setup of these fields is the most simple of all form fields to validate as radio buttons set one value that only needs to be tested when the form is submitted.

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

The difficulty with radio buttons is that there are at least two and usually more fields that need to be placed on the form, related together and tested as one group. Provided that you use the correct naming conventions and layout for your buttons, you will not have any trouble.

单选按钮的困难在于，至少有两个，通常是更多的字段需要放置在表单上，​​并相互关联并作为一组进行测试。 只要您为按钮使用正确的命名约定和布局，就不会有任何麻烦。

设置单选按钮组 ( Setup the Radio Button Group )

The first thing that to look at when using radio buttons on our form is how the buttons need to be coded in order for them to function properly as radio buttons. The desired behavior we want is to have only one button selected at a time; when one button is selected then any previously selected button will be automatically deselected.

在我们的表单上使用单选按钮时，要查看的第一件事是如何对按钮进行编码，以使其能够正确用作单选按钮。 我们想要的行为是一次只选择一个按钮。 当选择一个按钮时，任何先前选择的按钮将被自动取消选择。

The solution here is to give all of the radio buttons within the group the same name but different values. Here is the code used for the radio button themselves.

此处的解决方案是为组中的所有单选按钮赋予相同的名称，但使用不同的值。 这是用于单选按钮本身的代码。

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

The creation of multiple groups of radio buttons for the one form is also straightforward. All you need to do is to provide the second group of radio buttons with a different name to that used for the first group.

为一种形式创建多组单选按钮也很简单。 您需要做的就是为第二组单选按钮提供与第一组不同的名称。

The name field determines which group that a particular button belongs to. The value that will be passed for a specific group when the form is submitted will be the value of the button within the group that is selected at the time that the form is submitted.

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

描述每个按钮 ( Describe Each Button )

In order for the person filling out the form to understand what each radio button in our group does, we need to provide descriptions for each button. The simplest way to do this is to provide a description as text immediately following the button.

为了使填写此表格的人了解我们组中每个单选按钮的功能，我们需要提供每个按钮的说明。 最简单的方法是在按钮后紧随其后以文字形式提供说明。

There are a couple of problems with just using plain text, however:

但是，仅使用纯文本存在一些问题：

1. The text may be visually associated with the radio button, but it may not be clear to some who use screen readers, for example. 
   文本可能与单选按钮在视觉上相关联，但是例如对于某些使用屏幕阅读器的用户来说可能不清楚。

2. In most user interfaces using radio buttons, the text associated with the button is clickable and able to select its associated radio button. In our case here, the text will not work in this way unless the text is specifically associated with the button.

   在大多数使用单选按钮的用户界面中 ，与该按钮关联的文本是可单击的，并且能够选择其关联的单选按钮。 在我们这里的情况下，除非文本专门与按钮关联，否则文本将无法以这种方式工作。

将文本与单选按钮关联 ( Associating Text with a Radio Button )

To associate the text with its corresponding radio button so that clicking on the text will select that button, we need to make a further addition to the code for each button by surrounding the entire button and its associated text within a label.

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

Here is what the complete HTML for one of the buttons would look like:

以下是其中一个按钮的完整HTML内容：

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

As the radio button with the id name referred to in the for parameter of the label tag is actually contained within the tag itself, the for and id parameters are redundant in some browsers. Their browsers, however, are often not smart enough to recognize the nesting, so it is worth putting them in to maximize the number of browsers in which the code will function.

由于标签标签的for参数中所引用的具有id名称的单选按钮实际上包含在标签本身内，因此for和id参数在某些浏览器中是多余的。 但是，他们的浏览器通常不够智能，无法识别嵌套，因此值得将它们投入使用以最大化其功能所在的浏览器数量。

That completes the coding of the radio buttons themselves. The final step is to set up the radio button validation using JavaScript.

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

设置单选按钮验证 ( Setup Radio Button Validation )

Validation of groups of radio buttons may not be obvious, but it is straightforward once you know how.

单选按钮组的验证可能并不明显，但是一旦您知道怎么做就很简单。

The following function will validate that one of the radio buttons in a group has been selected:

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

// Radio Button Validation
// copyright Stephen Chapman, 15th Nov 2004,14th Sep 2005
// you may copy this function but please keep the copyright notice with it
function 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;
}

To use the above function, call it from within your form validation routine and pass it the radio button group name. It will return the value of the button within the group that is selected, or return a null value if no button in the group is selected.

要使用上述功能，请在表单验证例程中调用它，并将其传递给单选按钮组名称。 它将返回所选组中按钮的值，或者如果未选择该组中的按钮，则返回空值。

For example, here is the code that will perform the radio button validation:

例如，以下代码将执行单选按钮验证：

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

This code was included into the function called by an onClick event attached to the validate (or submit) button on the form.

此代码已包含在附加到表单上的验证(或提交)按钮的onClick事件调用的函数中。

A reference to the whole form was passed as a parameter into the function, which uses the "form" argument to refer to the complete form. To validate the radio button group with the name group1 we, therefore, pass form.group1 to the valButton function.

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

All of the radio button groups that you will ever need can be handled using the steps covered above.

可以使用上面介绍的步骤来处理您将需要的所有单选按钮组。

翻译自: https://www.thoughtco.com/how-to-validate-radio-buttons-on-a-web-page-4072520

测试html网页单选按钮