Question

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

我希望表单在第一次加载时显示给用户（没有选择，没有颜色变化 - 只是清除。），任何想法？

我正在使用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标签内添加 <body onload="document.refine.reset();">并将表单命名为精简。

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

Answer 1

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

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

使用JavaScript你必须这样做

 Document.getElementbyId("Radio-buttion").checked="false"

Answer 2

您尝试将表单重置为初始状态实际上是有效的，但问题是，因为您每次单击hashes时都会提交表单，因此页面和表单正在重新加载，最后点击的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);

Answer 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

清除提交表单的单选按钮

3 个答案: