js取消单选按钮选中示例代码

2023年6月11日上午4:30 • JavaScript

接下来我将详细讲解“js取消单选按钮选中”的完整攻略。首先需要了解一些基础知识。

在HTML中，单选按钮可以用input元素的type属性为radio来定义。当同一组单选按钮中有多个被选中时，只有最后被选中的那个有效。

如果我们想取消单选按钮的选中状态，可以使用JavaScript编写代码操作DOM。

下面是一个示例代码，用于取消id为myRadio的单选按钮的选中状态：

document.getElementById("myRadio").checked = false;

这段代码通过获取元素的ID属性，并设置checked属性为false来取消单选按钮的选中状态。

下面通过两个示例进一步说明如何取消单选按钮的选中状态。

示例一：使用for循环取消所有单选按钮的选中状态

<!DOCTYPE html>
<html>
<head>
    <title>取消选中状态示例</title>
    <meta charset="utf-8">
</head>
<body>
    <input type="radio" name="gender" value="male" id="male">男
    <input type="radio" name="gender" value="female" id="female">女
    <input type="button" value="取消选中状态" onclick="cancelChecked()">

    <script>
        function cancelChecked(){
            var radios = document.getElementsByName("gender");
            for(var i=0;i<radios.length;i++){
                radios[i].checked = false;
            }
        }
    </script>
</body>
</html>

这段代码表示在单选按钮的选项中，选择男或女，然后点击“取消选中状态”按钮即可取消所选的单选按钮。

在这个示例中，我们使用了JavaScript的getElementsByName方法获取所有name属性为gender的单选按钮，并使用for循环将它们的checked属性设为false。

示例二：使用DOM操作取消单选按钮的选中状态

<!DOCTYPE html>
<html>
<head>
    <title>取消选中状态示例</title>
    <meta charset="utf-8">
</head>
<body>
    <input type="radio" name="color" value="red" id="red">红色
    <input type="radio" name="color" value="blue" id="blue">蓝色
    <input type="button" value="取消选中状态" onclick="cancelChecked()">

    <script>
        function cancelChecked(){
            var radio = document.querySelector('input[name="color"]:checked');
            if(radio != null){
                radio.checked = false;
            }
        }
    </script>
</body>
</html>

这段代码与示例一类似，但使用了DOM操作的querySelector方法获取选中的单选按钮，并将其checked属性设置为false。

在这个示例中，我们使用了querySelector方法找到选中的单选按钮，并将其checked属性设为false。如果没有选中的单选按钮，则不执行任何操作。

以上就是“js取消单选按钮选中”的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js取消单选按钮选中示例代码 - Python技术站