Question

如何从表单中完全排除输入（特别是复选框）？具体来说，如何在重置表单时防止重置。关于如何防止它与表单一起提交有很多答案，但似乎没有解决表单重置的问题。

我的问题是我需要在我的页面上放置一个复选框，以便用户控制选项，但它需要位于一堆表单输入的中间。因为它只是一个用户选项选择框，而不是表单的一部分，所以我需要将它从所有表单操作中排除，例如重置表单或提交表单。

Answer 1

如果您使用支持html5的现代浏览器，则可以使用

的表单属性

正如mdn所描述：

输入元素与其关联的表单元素（其表单所有者）。属性的值必须是同一文档中元素的id。如果未指定此属性，则此元素必须是元素的后代。此属性使您可以将元素放置在文档中的任何位置，而不仅仅是作为其表单元素的后代。输入只能与一个表单相关联。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

因此您可以简单地将表单属性设置为文档中不存在的虚拟ID

这可以简单地从其包含的表单

中排除输入

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>html5 template .html</title>

  </head>

  <body>
    <form>
      <input type="checkbox" name="hello"/>aaa
      <input type="checkbox" name="hello"/>bbb
      <input type="checkbox" name="option" form="dummy"/>ccc
      <input type="submit"/>
      <input type="reset"/>
    </form>
  </body>
</html>

在上面的代码中。单击重置时。选项未重置

当你点击提交选项时没有提交（点击提交后看地址，如：？hello = on＆amp; hello = on）

Answer 2

您可能必须使用Javascript进行此类表单重置。

这是小提琴示例

http://jsfiddle.net/8K7Bt/

<强>的Javascript

$(function() {
    $("form").on('reset', function() {
        var inputs = $(this).find(":checkbox");
        inputs.each(function() {
            $(this).data('value', $(this).is(':checked'));
        });
        this.reset();
        inputs.each(function() {
            $(this).attr('checked', $(this).data('value'));
        });
    });
});

<强> HTML

<form>
    <input type="text" />
    <br/>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <br/>
    <label><input type="radio" name="radio" /> radio 1</label><br/>
    <label><input type="radio" name="radio" /> radio 2</label>
    <br/>
    <label><input type="checkbox" name="checkbox" checked='checked' /> checkbox 1 (excluded from reset)</label><br/>
    <label><input type="checkbox" name="checkbox" /> checkbox 2 (excluded from reset)</label>
        <br/>
        <br/>
    <input type="reset" value="reset me" />
</form>

完全从表单中排除复选框元素？

2 个答案: