如何重置由 php 设置的选中值的复选框？答案

【问题标题】：How do I reset a checkbox thats checked value is set by php?如何重置由 php 设置的选中值的复选框？
【发布时间】：2014-06-26 19:30:03
【问题描述】：

我有一个带有无数复选框的网络表单。如果表单填写不正确，则不会重置任何复选框（作为一种防挫折功能）。

问题是，如果表单之前已提交，则重置按钮无法取消选中所有框。我该如何解决这个问题？

如果事先提交了表单，document.getElementById("form").reset() 也不起作用。

示例代码如下：

<body>

<script>
function resetData() {
    document.getElementById("deleteContactFlag").checked=false;
    document.getElementById("userAdministrationFlag").checked=false;
}
</script>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" id="form">
    <input type="checkbox" name="deleteContactFlag" id="deleteContactFlag" <?php if (isset($_POST["deleteContactFlag"])) echo 'checked="checked"'; ?>/> Delete Contacts<br>
    <input name="userAdministrationFlag" type="checkbox" id="userAdministrationFlag" <?php if (isset($_POST["userAdministrationFlag"])) echo 'checked="checked"'; ?>/> User Administration<br><br>

    <input type="submit" name="submit" id="submit" value="Submit">
    <button type="button" onClick="resetData()">Reset</button>
</form>

</body>

【问题讨论】：

document.getElementById("form").reset(); 为我工作
=\我不知道为什么它对我不起作用。
我认为reset 将所有输入设置为初始值。在您的情况下，其中一些输入最初是“检查”的。 stackoverflow.com/questions/4125247/how-does-form-reset-work
实际上，它可以工作，但前提是用户尚未按下提交按钮。他们按下它后，它就不再起作用了。

标签： javascript php checkbox

【解决方案1】：

表单重置不会清除表单中的所有值，而是将表单设置回初始状态，即页面首次加载时的初始状态。（在这个初始状态下，一些复选框已经被选中。）

尝试手动重置所有复选框：

var inputs=document.getElementsByTagName("input");
for (var i in inputs)
    if (inputs[i].type=="checkbox") inputs[i].checked=false;

或者如果你使用 jQuery：

$("input[type=checkbox]").each(function() { this.checked=false; });

【讨论】：

【解决方案2】：

尝试在 html 元素之外使用 PHP 代码

HTML

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"method="post" id="form">

    <input type="checkbox" name="deleteContactFlag" id="deleteContactFlag" /> Delete Contacts
    <input name="userAdministrationFlag" type="checkbox" id="userAdministrationFlag" /> User Administration

    <input type="submit" name="submit" id="submit" value="Submit">
    <button type="button" onClick="resetData()">Reset</button>
</form>

【讨论】：

【解决方案3】：

如果您发现表单重置功能不可靠，您可以使用 JavaScript 检查和取消检查 checkbox 输入。（我相信重置表单应该只是将其设置回页面加载时的初始状态，这就是您可能遇到此问题的原因？）。这是一个例子：

function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}

<a onclick="javascript:checkAll('form', true);" href="javascript:void();">check all</a>
<a onclick="javascript:checkAll('form', false);" href="javascript:void();">uncheck all</a>

来自这里的代码（那里也有一个 jQuery 示例）：http://www.webdevdoor.com/javascript-ajax/javascript-function-check-uncheck-checkboxes/

【讨论】：