正文

如何用JavaScript让单选按钮（radio）被选中？实用技巧解析

/0 浏览量
1013

在网页设计中，单选按钮（radio button）是让用户从一组选项中选择一个的常用控件。JavaScript 提供了多种方法来控制单选按钮的选中状态。以下是一些实用的技巧，帮助你轻松地使用 JavaScript 来选中单选按钮。

1. 通过直接设置 checked 属性

最直接的方式是使用单选按钮的 checked 属性。当你想选中一个单选按钮时，只需将该属性设置为 true 即可。

// 假设有一个单选按钮的 id 是 'myRadio'
document.getElementById('myRadio').checked = true;

2. 通过类名切换

如果你不想直接操作 checked 属性，可以预先给单选按钮添加一个表示选中状态的类名，然后通过切换这个类名来控制选中状态。

<!-- HTML 结构 -->
<label for="myRadio">Option 1</label>
<input type="radio" id="myRadio" name="options" class="unchecked">

<style>
.unchecked {
    display: none;
}
.checked {
    display: inline-block;
    /* 其他样式 */
}
</style>

// JavaScript 代码
document.getElementById('myRadio').classList.add('checked');
document.getElementById('myRadio').classList.remove('unchecked');

3. 通过事件监听器

你可以为每个单选按钮添加一个事件监听器，当点击时自动选中自己，并取消其他单选按钮的选中状态。

<input type="radio" id="option1" name="options" onclick="selectRadio(this)">
<input type="radio" id="option2" name="options" onclick="selectRadio(this)">

function selectRadio(radio) {
    var radios = document.getElementsByName('options');
    for (var i = 0; i < radios.length; i++) {
        if (radios[i] !== radio) {
            radios[i].checked = false;
        }
    }
    radio.checked = true;
}

4. 使用jQuery简化操作

如果你使用 jQuery 库，那么操作单选按钮将更加简单。

// 选择所有单选按钮，并设置第一个为选中状态
$('input[type=radio][name=options]').first().prop('checked', true);

5. 选中最后一个单选按钮

如果你想选中一组单选按钮中的最后一个，可以使用以下方法：

// 选择所有单选按钮，并设置最后一个为选中状态
$('input[type=radio][name=options]').last().prop('checked', true);

总结

使用 JavaScript 选中单选按钮有多种方法，你可以根据实际情况选择最适合你的技巧。记住，选择合适的方法可以使你的代码更加清晰和高效。

-- 展开阅读全文 --