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

HTML表单是Web开发中最重要的组件之一。表单提供了一种通过Web页面收集用户输入的方式。复选框组和单选按钮组是表单中最常用的元素之一，它们可以让用户在多个选项中进行选择。接下来，我们将深入学习HTML中的表单复选框组和单选按钮组。

复选框组

复选框组是一组复选框，它们的名称相同，但是值不同。用户可以选择其中一个或多个选项。HTML中的复选框使用元素来创建。通过设置name属性，可以将多个复选框组合在一起，从而形成一个复选框组。下面是一个复选框组的例子：

<form>
  <label>
    <input type="checkbox" name="fruit" value="apple">苹果
  </label>
  <label>
    <input type="checkbox" name="fruit" value="banana">香蕉
  </label>
  <label>
    <input type="checkbox" name="fruit" value="orange">橙子
  </label>
</form>

在上面的例子中，我们创建了一个名为fruit的复选框组，其中包含三个选项：apple、banana和orange。用户可以选择其中的一个或多个选项。

选中和取消选中复选框

当用户选中一个复选框时，它的值将被提交到服务器。如果用户取消选中一个复选框，则它的值将不会被提交。

通过JavaScript，我们可以编写函数来处理复选框的选中和取消选中事件。下面是一个选中和取消选中复选框的JavaScript函数：

function checkChanged(checkbox) {
  if (checkbox.checked) {
    console.log(checkbox.value + " is checked");
  } else {
    console.log(checkbox.value + " is unchecked");
  }
}

上面的函数将在复选框选中或取消选中时被调用，并输出选中或取消选中的复选框的值。

单选按钮组

单选按钮组是一组单选按钮，它们的名称相同，但是值不同。用户只能选择其中一个选项。HTML中的单选按钮使用元素来创建。通过设置name属性，可以将多个单选按钮组合在一起，从而形成一个单选按钮组。下面是一个单选按钮组的例子：

<form>
  <label>
    <input type="radio" name="gender" value="male">男
  </label>
  <label>
    <input type="radio" name="gender" value="female">女
  </label>
</form>

在上面的例子中，我们创建了一个名为gender的单选按钮组，其中包含两个选项：男和女。用户只能选择其中的一个选项。

选中单选按钮

当用户选中一个单选按钮时，它的值将被提交到服务器。如果用户取消选中一个单选按钮，则它的值将不会被提交。

通过JavaScript，我们可以编写函数来处理单选按钮的选中和取消选中事件。下面是一个选中和取消选中单选按钮的JavaScript函数：

function radioChanged(radio) {
  if (radio.checked) {
    console.log(radio.value + " is selected");
  }
}

上面的函数将在单选按钮选中时被调用，并输出选中的单选按钮的值。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 在HTML中插入GitHub代码段
• 下一篇： 使用HTML和CSS创建响应式卡片效果