当前位置：首页 > 行业动态 > 正文

如何实现JavaScript单选按钮的交互效果？

admin
行业动态
2024-09-25
1

在JavaScript中，单选效果可以通过多种方法实现。我们会使用HTML的`

元素来创建单选按钮，并通过CSS和JavaScript来控制其样式和行为。当用户选择一个选项时，其他选项会自动取消选择，这是由浏览器自动处理的。我们可以通过监听

change`事件来执行自定义的JavaScript代码，例如更新UI或发送AJAX请求。我们还可以使用JavaScript框架（如React、Vue等）来简化单选效果的实现。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>单选按钮效果</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="gender" value="male"> 男
        </label>
        <label>
            <input type="radio" name="gender" value="female"> 女
        </label>
    </form>
    <script src="main.js"></script>
</body>
</html>

CSS部分

/* main.css */
body {
    fontfamily: Arial, sansserif;
}
label {
    display: inlineblock;
    marginright: 20px;
}
input[type="radio"] {
    marginright: 5px;
}

JavaScript部分

// main.js
document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
    radio.addEventListener('change', function () {
        if (this.checked) {
            alert('您选择了' + this.value);
        }
    });
});