JavaScript DOM 操作单选框选项设置

在网页开发中，经常需要通过 JavaScript 来操作 DOM 元素，其中对单选框选项的设置是一个常见需求。掌握这一技能，能够极大地提升用户交互体验和页面功能的实现效率。

我们要获取单选框元素。在 JavaScript 中，可以使用多种方法来实现，比如 document.getElementById()、document.querySelector() 等。例如，假设有一个单选框的 id 为 “radio1”，我们可以使用 const radio = document.getElementById('radio1'); 来获取该单选框元素。

接下来是设置单选框的选中状态。要将一个单选框设置为选中状态，只需将其 checked 属性设置为 true。比如 radio.checked = true; 这样，这个单选框就会被选中。

在实际应用场景中，可能会有一组单选框，用户只能从中选择一个选项。我们可以为这组单选框添加相同的 name 属性，例如：

<input type="radio" name="group1" id="radio1">选项1
<input type="radio" name="group1" id="radio2">选项2

然后通过 JavaScript 来控制它们的选中逻辑。例如，我们可以创建一个函数，当用户点击某个按钮时，根据一定条件来选中特定的单选框：

function selectRadio() {
    const condition = true; // 这里假设一个条件
    const radio1 = document.getElementById('radio1');
    const radio2 = document.getElementById('radio2');
    if (condition) {
        radio1.checked = true;
    } else {
        radio2.checked = true;
    }
}

另外，我们还可以监听单选框的 change 事件，当用户选择不同的单选框时执行相应操作。例如：

const radio1 = document.getElementById('radio1');
radio1.addEventListener('change', function() {
    if (this.checked) {
        console.log('选项1被选中了');
    }
});

通过上述方法，我们可以灵活地使用 JavaScript 对 DOM 中的单选框选项进行设置、监听和控制，为网页添加丰富的交互功能。无论是简单的表单验证，还是复杂的业务逻辑处理，对单选框的有效操作都能让网页更加智能和易用，满足不同用户的需求，提升整个网站的用户体验。