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


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

为了取消选中单选按钮,有很多方法可用,但我们将看到最首选的方法。

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

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            JavaScript | uncheck a radio button
        </title> 
    </head> 
      
    <body style = "text-align:center;" id = "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>
            var el_down = document.getElementById("GFG_DOWN");
              
            function gfg_Run() {
                var radioButton = document.getElementById("radio");
                radioButton.checked = false;
                el_down.innerHTML = "Unchecked";
            }
        </script> 
    </body> 
</html>                    

输出:

  • 在点击按钮之前:
  • 点击按钮后:

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

<!DOCTYPE html>  
<html>  
    <head> 
        <title> 
            JQuery | Uncheck a radio button
        </title>
          
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
      
    <body style = "text-align:center;" id = "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>
            var el_down = document.getElementById("GFG_DOWN");
              
            function gfg_Run() {
                $("#radio").prop("checked", false);
                el_down.innerHTML = "Unchecked";
            }
        </script> 
    </body>  
</html>

输出:

  • 在点击按钮之前:
  • 点击按钮后:

Made with ❤️ in Chengdu. Copyright reserved 2019-2023.

蜀ICP备20006366号-1