JavaScript DOM操作：单选/复选框与下拉菜单设置实例

本文将详细介绍如何使用JavaScript (JS) 的DOM (Document Object Model) API来设置单选按钮、复选框以及下拉菜单。DOM 是HTML文档的结构化接口，允许开发者通过编程方式操作网页元素。 首先，我们来看看如何设置单选按钮。单选按钮是HTML中的<input type="radio">元素，它们构成一组互斥的选择，每次只能选中一个。每个单选按钮都有checked属性，当某个选项被选中时，其checked属性值为true，其他选项的checked属性则变为false。以下是一个简单的示例： ```javascript <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; for (i = 0; i < aChoices.length; i++) { // 遍历单选按钮数组 if (aChoices[i].checked) { // 如果找到已选中的选项 break; } } alert("相机品牌是：" + aChoices[i].value); } function setChoice(iNum) { var oForm = document.forms["uForm1"]; oForm.camera[iNum].checked = true; // 设置特定索引的单选按钮为选中状态 } </script> ``` 在HTML部分，我们有如下单选按钮结构： ```html <form method="post" name="uForm1" action="addInfo.aspx"> 相机品牌： <p> <input type="radio" name="camera" id="canon" value="Canon"> <label for="canon">Canon</label> </p> <!-- 类似的结构，包括Nikon, Sony, Olympus等 --> </form> ``` 在这个例子中，`getChoice`函数用于获取当前选中的单选按钮，而`setChoice`函数则可以用来动态设置某个单选按钮为选中状态。 接下来是复选框设置，与单选按钮类似，复选框是<input type="checkbox">，每个复选框也有checked属性。它们允许用户选择多个选项。在JavaScript中，你可以通过遍历复选框集合并操作checked属性来控制其选中状态。 至于下拉菜单，通常使用<select>元素配合<option>元素构建。JS可以通过修改<option>元素的selected属性来选择或取消选择菜单项。不过，这里没有直接提供下拉菜单的设置代码，但原理是一致的。 总结来说，本文介绍了如何使用DOM操作HTML中的单选按钮和复选框，通过JavaScript动态控制它们的状态。对于下拉菜单，虽然没有直接给出，但基本思路也是类似的，都是通过修改元素的属性来实现。这些基础操作在前端开发中是非常常见的，熟练掌握可以极大地提升页面交互的灵活性和用户体验。