点击按钮重置表单输入：复选框无法取消勾选的问题

哦，我知道问题出在哪了！你现在处理复选框的方式不对，因为复选框的选中状态压根不是靠value属性来控制的～

问题原因 #

文本输入框的内容是通过value和defaultValue来维护的，所以你重置文本框的代码是有效的。但复选框的defaultValue其实是它提交时的默认取值（通常是"on"），和它是否被选中完全无关。要控制复选框的选中状态，得用checked属性，而它的默认选中状态存在defaultChecked这个属性里——这个属性会记录页面加载时复选框的初始状态。

修改后的代码 #

把你处理复选框的那行代码替换掉就行，完整代码如下：

<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.checked = field.defaultChecked; // 这里是关键修改
  };
</script>

额外小建议 #

其实你还可以用表单自带的reset()方法来一键重置所有表单元素，这样代码更简洁。只要把这些输入框放在一个<form>标签里，然后调用表单的reset方法就行：

<form id="myForm">
  <input type="text" id="textbox1" defaultValue="默认值1">
  <input type="text" id="textbox2" defaultValue="默认值2">
  <input type="checkbox" id="agreecheckbox" defaultChecked>同意协议
  <button type="button" id="reset">reset</button>
</form>
<script type="text/javascript">
  document.getElementById('reset').onclick = function() {
    document.getElementById('myForm').reset();
  };
</script>

这个方法会自动把所有表单元素恢复到页面加载时的默认状态，不用一个个手动处理，省心很多～

内容的提问来源于stack exchange，提问作者gjames