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

Clear radio buttons of a submitted form

本文关键字：单选按钮 表单 提交 清除      更新时间：2023-09-26

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

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

我使用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>

这些是我迄今为止尝试过的方法：

方法1:在关闭表单标记之前，为表单提供标准的html重置按钮。

方法2:在关闭表单标签前添加了这一行：

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

在关闭表单标签后添加了此脚本：

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

方法3:在添加的正文标记中<body onload="document.refine.reset();">，并将该形式命名为refine。

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

通过使用jQuery-pro（），您可以轻松地选中或取消选中单选按钮。

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

通过使用JavaScript，你必须像这样做

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

您将表单重置为初始状态的尝试实际上是有效的，但问题是，因为您每次单击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>

您可以使用

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

在javascript上，您应该使用

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

查看jsfiddle

相关文章：