取消选中按钮按下复选框而不重置表单

Posted 2023-03-05

【中文标题】取消选中按钮按下复选框而不重置表单

【英文标题】：Uncheck checkbox on button press without resetting form

【发布时间】：2018-06-29 16:17:45

【问题描述】：

我有一个按钮，我想重置三个表单输入。

我已设法清除两个文本输入（输入 1 和输入 2），但复选框不会清除。

<button  id="reset">reset</button>

这是我的脚本：

<script type="text/javascript">
document.getElementById('reset').onclick= function() 
    var field= document.getElementById('textbox1');
    field.value= field.defaultValue;
    var field= document.getElementById('textbox2');
    field.value= field.defaultValue;
    var field= document.getElementById('agreecheckbox');
    field.value= field.defaultValue;
;
</script>

【问题讨论】：

Check/Uncheck checkbox with JavaScript?的可能重复

如果按钮的类型未定义，则其行为类似于提交按钮

@Kos 应该说我试过 $("#agreecheckbox").prop("checked", false);太

【参考方案1】：

这是您需要的结构。我直接在按钮上添加了 onclick 并创建了一个函数（myFunctionName）。我在您的按钮和复选框周围添加了一个表单，因为我们正在处理表单数据。然后检查是否使用此方法检查了复选框。如果不是，则将检查设置为空。

CSS

function myFunctionName()
if(document.getElementById('agreecheckbox').checked  == true)
document.getElementById('agreecheckbox').checked = '';
var field= document.getElementById('textbox1');
field.value= field.defaultValue;
var field= document.getElementById('textbox2');
field.value= field.defaultValue;

html

<form id="formName" method="post">
<button onclick="myFunctionName();" type="button"  id="reset">reset</button>
<input type="checkbox" checked="" id="agreecheckbox">
</form>

【参考方案2】：

尝试这样做

document.getElementById("agreecheckbox").checked = false;

【参考方案3】：

这是一个使用 jquery 重置复选框的简单示例。 此解决方案检查是否单击了 id 重置，如果是，则从复选框 id 中删除选中的属性。

$(function()
$("#reset").click(function()
   $("#chkbox").removeAttr('checked');
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="reset">reset</button>
<input id=chkbox type=checkbox checked>

【参考方案4】：

试着换成

var field= document.getElementById('agreecheckbox');
field.checked= false;

我们将复选框属性设置为 false。 如果要改成true，可以设置field.checked=true;

【参考方案5】：

document.getElementById('reset').onclick= function() 
    var field= document.getElementById('agreecheckbox');
    field.checked= field.defaultValue;
;

<input id="agreecheckbox" type="checkbox">
<button  id="reset">reset</button>

【讨论】：

@gjames 请检查。

这段代码不能单独工作，其余的在哪里？

@Jonny 问题与单击重置时无法重置复选框值有关。我的解决方案给出了可以用来实现完整解决方案的想法。

我们应该在stackovewrflow上向用户解释我们的代码，这是为了帮助人们学习。什么是 field.defaultValue 不应该是“选中”还是“”？默认值不存在。这就是为什么它不起作用。

好的。我应该包括我同意。