JavaScript表单：选择元素_js 表格+单选字段-CSDN博客

本文链接：https://blog.csdn.net/kllo__/article/details/122964094

了解在需要选择选项的网页上表示数据时派上用场的元素。

复选框

使用标签 <input type="checkbox"> 向HTML 表单添加复选框。

下面代码向用户提供了是否接收确认电子邮件的选择。

HTML 代码：

<html>
 <head>
 </head>
 <body>
	<input type="checkbox" name="confirmation" id="confirmation">
	<label for="confirmation">Send me a confirmation email</label> </body>
</html>

显示效果：

每当用户选中或取消选中该框时，就会启动一个 change 事件。与此事件相关联的 Event 对象有一个 checked 布尔属性。该属性给出了字段的新状态（checked 或者 not checked）。

下面的代码处理复选框上的 change 事件，以在控制台显示一条消息。

// Show if the email confirmation checkbox is checked
document.getElementById("confirmation").addEventListener("change", e => {
  console.log(`Email confirmation request: ${e.target.checked}`);
});

显示结果：

单选按钮（Radio-Buttons）

单选按钮允许用户从多个选项中做出选择。通过 <input type="radio">标签创建单选按钮，它们具有相同的 name 属性和不同的 value 属性。

下面是代码节选，该表单允许用户在三个单选按钮之间进行选择，每个按钮代表一个订阅选项。

<html>
 <head>
 </head>
 <body>
	<input type="radio" name="subscription" id="newsroom" value="newspromo">
	<label for="newsroom">Subscribe me to newsletters and promotions</label>
	<br>
	<input type="radio" name="subscription" id="news" value="news">
	<label for="news">Subscribe me only to the newsletter</label>
	<br>
	<input type="radio" name="subscription" id="no" value="no" checked>
	<label for="no">No subscriptions</label>
	<br>
 </body>
</html>

显示效果：

当用户的选择改变时，下面的 JavaScript 代码将向控制台添加一条消息。

// Show the subscription type selected via radio button
const subscriptionElements = Array.from(document.getElementsByName("subscription"));
subscriptionElements.forEach(element => {
  element.addEventListener("change", e => {
    console.log(`Selected subscription: ${e.target.value}`);
  });
});

显示效果：

更改事件的 target.value 属性与新选择的<input> 标记的 value 属性相匹配。

下拉列表

使用 <select> 标签创建一个下拉列表，利用 <option> 标签添加可能的选项。

下面的代码可以在下拉列表中选择国籍。

<html>
 <head>
 </head>
 <body>
   
	<label for="nationality">Nationality</label>:
	<select name="nationality" id="nationality">
  <option value="US" selected>American</option>
  <option value="FR">French</option>
  <option value="ES">Spanish</option>
  <option value="XX">Other</option>
</select>
  
 </body>
</html>

显示效果：

下面的代码使用下拉列表上触发的 change 事件来显示用户的选择。

// Show the selected nationality
document.getElementById("nationality").addEventListener("change", e => {
  console.log("Nationality code: " + e.target.value);
});

显示效果：