HTML中的表单复选框和单选按钮

翻滚的胖子
2023-06-07 14:37:18
HTML JavaScript

在HTML中，表单是非常常见的元素，其中复选框和单选按钮也是表单中经常使用的元素，本文将为大家详细介绍它们的使用方法。

复选框

复选框是一种允许用户选择多个选项的表单元素，它的基本格式如下：

<input type="checkbox" name="myCheckbox" value="1">

其中，type属性为checkbox，name属性代表复选框的名称，value属性代表复选框的值。

如果需要设置复选框的默认选中状态，可以在input标签中添加checked属性，例如：

<input type="checkbox" name="myCheckbox" value="1" checked>

如果需要获取用户选择的复选框的值，可以使用以下代码：

var myCheckbox = document.getElementsByName('myCheckbox');
var myCheckboxValue = '';
for (var i = 0; i < myCheckbox.length; i++) {
  if (myCheckbox[i].checked) {
    myCheckboxValue += myCheckbox[i].value + ',';
  }
}
myCheckboxValue = myCheckboxValue.substring(0, myCheckboxValue.length - 1); // 去掉最后一个逗号
console.log(myCheckboxValue);

在上面的代码中，我们首先通过document.getElementsByName()方法获取所有name为myCheckbox的复选框元素，然后通过循环判断每个复选框是否被选中，如果被选中则将其value值添加到myCheckboxValue变量中，并且在最后去掉最后一个逗号。

单选按钮

单选按钮是一种只允许用户选择一个选项的表单元素，它的基本格式如下：

<input type="radio" name="myRadio" value="1">

其中，type属性为radio，name属性代表单选按钮的名称，value属性代表单选按钮的值。

如果需要设置单选按钮的默认选中状态，可以在input标签中添加checked属性，例如：

<input type="radio" name="myRadio" value="1" checked>

如果需要获取用户选择的单选按钮的值，可以使用以下代码：

var myRadio = document.getElementsByName('myRadio');
var myRadioValue = '';
for (var i = 0; i < myRadio.length; i++) {
  if (myRadio[i].checked) {
    myRadioValue = myRadio[i].value;
    break;
  }
}
console.log(myRadioValue);

在上面的代码中，我们首先通过document.getElementsByName()方法获取所有name为myRadio的单选按钮元素，然后通过循环判断每个单选按钮是否被选中，如果被选中则将其value值赋值给myRadioValue变量，并且在找到第一个被选中的单选按钮后退出循环。