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

Question

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

我已设法清除两个文本输入（输入 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>

Answer 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>

Answer 2

尝试这样做

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

Answer 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>

Answer 4

试着换成

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

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

Answer 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>