js多选按钮

JavaScript多选按钮是指一种用户界面元素，通常用于让用户从多个选项中选择一个或多个选项。这些按钮通常以单选按钮（Radio Buttons）和复选框（Checkboxes）的形式出现。以下是它们的基本区别：

单选按钮（Radio Buttons）：
单选按钮允许用户从一组互斥的选项中选择一个选项。
只能选择一个单选按钮。
在HTML中，单选按钮的元素使用。
若要使用户只能选择一个单选按钮，它们通常应该具有相同的name属性。
示例：

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="radio" name="gender" value="other"> 其他

复选框（Checkboxes）：
复选框允许用户从一组选项中选择多个选项。
用户可以同时选择多个复选框。
在HTML中，复选框的元素使用。
示例：

<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="music"> 音乐
<input type="checkbox" name="hobbies" value="sports"> 体育

要在JavaScript中处理这些多选按钮的值，您可以使用DOM操作来获取选定的按钮或复选框的值。以下是一个简单的JavaScript示例，演示如何获取选定的值：

// 获取单选按钮的值
const genderRadioButtons = document.getElementsByName("gender");
let selectedGender;
for (const radioButton of genderRadioButtons) {
  if (radioButton.checked) {
    selectedGender = radioButton.value;
    break;
  }
}

// 获取复选框的值
const selectedHobbies = [];
const hobbiesCheckboxes = document.getElementsByName("hobbies");
for (const checkbox of hobbiesCheckboxes) {
  if (checkbox.checked) {
    selectedHobbies.push(checkbox.value);
  }
}

console.log("选择的性别：", selectedGender);
console.log("选择的爱好：", selectedHobbies);
这是一个基本示例，您可以根据您的需求进一步扩展和定制多选按钮的行为。