清除已提交表单的单选按钮答案

【问题标题】：Clear radio buttons of a submitted form清除已提交表单的单选按钮
【发布时间】：2021-07-01 22:17:44
【问题描述】：

我有一个包含两个单选按钮组的表单。在每个组中选择选项时，它们会保持选中状态并更改颜色以显示它们已被选中。但是，当我尝试使用 清除过滤器按钮 重置表单时，没有任何反应。

我希望表单在第一次加载时出现在用户面前（没有选择，没有颜色变化 - 只是清除了。），有什么想法吗？

我正在使用 onclick:"javascript:submit()" 而不是提交按钮，这可能会导致问题吗？

守则：

<form action="" method="post">
        <p>Date:</p>
            <input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autocomplete="off"  <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?> /> <label for="dateasc">Newest &rsaquo; Oldest</label>
            <br>
            <input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?> /> <label for="datedesc">Oldest &rsaquo; Newest</label>

        <hr><br>    
        <p>Title:</p>   
            <input type="radio" name="title" onclick="javascript:submit()" value="Mr"  <?php if (isset($_POST['title']) && $_POST['title'] == 'Mr') echo ' checked="checked"';?> /><label for="Mr">Mr</label>
            <br>
            <input type="radio" name="title" onclick="javascript:submit()" value="Mrs" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mrs') echo ' checked="checked"';?> /><label for="Mrs">Mrs</label>
            <br>
            <input type="radio" name="title" onclick="javascript:submit()" value="Miss" <?php if (isset($_POST['title']) && $_POST['title'] == 'Miss') echo ' checked="checked"';?> /><label for="Miss">Miss</label><br><br>
    <p class="clear">Clear Filters<p>
    </form>

这些是我目前尝试过的方法：

方法一： 在关闭表单标记之前为表单提供标准 html 重置按钮。

方法二： 在结束表单标记之前添加了这一行：

<input type="button" onclick="myFunction()" value="Reset form">

在结束表单标记之后添加此脚本：

<script>
function myFunction() {
    document.getElementById("myForm").reset();
}
</script>

方法三： 在 body 标签内添加 <body onload="document.refine.reset();"> 并将表单命名为 refine。

方法四： 将输入字段设置为关闭自动完成

【问题讨论】：

标签： javascript php html css

【解决方案1】：

通过使用 jQuery prop()，您可以轻松地选中或取消选中单选按钮。

 $('Radio-button').prop('checked', false);

通过使用 JavaScript 你必须这样做

 document.getElementById("Radio-button").checked="false"

【讨论】：

感谢 Hassan Ali，我必须给每个单选按钮一个唯一的 ID 吗？或者我可以运行将类型视为单选按钮的 JavaScript。尝试使用以下方法：
您可以使用类，因为如果您使用 id，那么您必须为两个单选按钮提供唯一的 id。如果您满意，请接受它作为答案。感谢您的关注。
使用 id 可以正常工作，但使用 class 则没有任何反应。我希望我的代码有错误。这就是我所拥有的：表单按钮：和脚本：
请使用 jquery 而不是 javascript 很简单。
感谢 Hassan Ali，我不太了解 jQuery，我知道的足以让第二个 JavaScript 选项使用 ID 工作，但我必须复制并粘贴该行并更改每个 id单选按钮。不过，对于那些比我更懂 JQuery、JavaScript 的人来说，这个答案很有用。

【解决方案2】：

您尝试将表单重置为其初始状态实际上是有效的，但问题是，因为您每次单击input 时都在提交表单，因此页面和表单正在重新加载并且最后点击的input 现在的初始状态为checked。因此，您需要做的是遍历所有 checked 输入并“取消选中”它们。下面是一个精简的例子：

var inputs=document.querySelectorAll("input[type=radio]:checked"),
    x=inputs.length;
document.querySelector("button[type=reset]").addEventListener("click",function(event){
    while(x--)inputs[x].checked=0;
    event.preventDefault();
},0);

<form>
    <input id="option1a" name="option1" type="radio" value="a"><label for="option1a">Option 1A</label>
    <input checked id="option1b" name="option1" type="radio" value="b"><label for="option1b">Option 1B</label>
    <input id="option1c" name="option1" type="radio" value="c"><label for="option1c">Option 1C</label>
    <hr>
    <input id="option2a" name="option2" type="radio" value="a"><label for="option2a">Option 2A</label>
    <input checked id="option2b" name="option2" type="radio" value="b"><label for="option2b">Option 2B</label>
    <input id="option2c" name="option2" type="radio" value="c"><label for="option2c">Option 2C</label>
    <hr>
    <button type="reset">Clear</button>
</form>

【讨论】：

感谢 Shaggy，我发现这是最好的解决方案，它以我想要的方式工作。
当 form.reset() 会为您完成时，您为什么要循环输入？此外，您还有一个错误，如果您按清除而不更改任何内容，单选按钮将取消选中...

【解决方案3】：

你可以使用

<form action="" class="form" method="post">

在你应该使用的javascript上

$(document).ready(function(){
 $(".form input[type=radio]").each(function () {
$(this).prop('checked', false);
   });
});

check here on jsfiddle

【讨论】：

我一定是遗漏了一些东西，这不会在我尝试时取消选中表单。
你有没有在
申请class="form"
jsfiddle.net/q21dy32v 去查看这里默认情况下我检查了每个收音机，但在页面加载时没有人被检查
谢谢 Suyash Singh，是的，我添加了表单类。 jsfiddle 不工作，当我运行它时它中止。
在我自己的代码上添加您的解决方案时，它会立即取消选择。