如何使用JavaScript/jQuery取消选择单选按钮

如何使用JavaScript/jQuery取消选择单选按钮

为了取消选择单选按钮,有很多方法可用,但我们将看到最常用的方法。在HTML中,我们可以使用相同的name属性创建单选按钮,并为每个单选按钮设置唯一的值。每组中只能选择一个单选按钮。

取消选择单选按钮的方法:

示例1: 这个示例使用 Javascript checked属性 取消选择 单选按钮 。JavaScript的Radio checked属性用于设置或返回输入单选按钮的选中状态。这个属性用于反映HTML checked属性。

<!DOCTYPE html>
<html lang="en">
 
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <input id="radio"
           type="radio"
           name="GFG"
           value="GeeksForGeeks"
           checked>GFG
    <br><br>
    <button onclick="gfg_Run()">
        uncheck
    </button>
    <p id="GFG_DOWN"
       style="color:green;font-size:20px;">
    </p>
    <script>
        let el_down = document.getElementById("GFG_DOWN");
 
        function gfg_Run() {
            let radioButton = document.getElementById("radio");
            radioButton.checked = false;
            el_down.innerHTML = "Unchecked";
        }
    </script>
</body>
 
</html>

输出:

如何使用JavaScript/jQuery取消选择单选按钮

示例2: 此示例使用jQuery的prop()方法取消选中 单选按钮 。prop()方法用于设置或返回所选元素的属性和值。

<!DOCTYPE html>
<html lang="en">
 
<body>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <input id="radio"
           type="radio"
           name="GFG"
           value="GeeksForGeeks"
           checked>GFG
    <br><br>
    <button onclick="gfg_Run()">
        uncheck
    </button>
    <p id="GFG_DOWN"
       style="color:green;font-size:20px;">
    </p>
    <script>
        let el_down = document.getElementById("GFG_DOWN");
 
        function gfg_Run() {
            $("#radio").prop("checked", false);
            el_down.innerHTML = "Unchecked";
        }
    </script>
</body>
</html>

输出:

如何使用JavaScript/jQuery取消选择单选按钮

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程