首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

选择另一个后无法取消选中单选按钮

在HTML中,单选按钮(<input type="radio">)具有互斥的特性,这意味着一旦选中一个单选按钮,其他同组的单选按钮将自动取消选中

如果您希望在用户选择另一个单选按钮时取消选中当前选中的单选按钮,您可以使用JavaScript来实现这个功能。以下是一个简单的示例:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="choice" value="option1">Option 1

    <input type="radio" name="choice" value="option2">Option 2

    <input type="radio" name="choice" value="option3">Option 3


    <script>
        const radioButtons = document.querySelectorAll('input[type="radio"]');

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.checked) {
                    // 当前单选按钮被选中时,取消选中其他同组的单选按钮
                    radioButtons.forEach(otherRadio => {
                        if (otherRadio !== this) {
                            otherRadio.checked = false;
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

在这个示例中,我们首先获取所有的单选按钮,然后为每个单选按钮添加一个change事件监听器。当单选按钮的状态发生变化时(即被选中或取消选中),我们检查当前单选按钮是否被选中。如果被选中,我们将遍历其他同组的单选按钮并取消选中它们。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券