POST 未选中 HTML 复选框

htmlweb developmentfront end technology更新于 2024/7/27 3:56:17

在本教程中，我们将学习如何 POST 未选中 HTML 复选框。

要与用户交互，需要通过网站获取他们的输入或数据。HTML 表单用于获取用户的输入。表单对于在网站上获取用户数据至关重要。这些表单获取用户的输入，并使用 HTTP 请求将数据发送到服务器。

HTTP 请求有两种类型:GET 和 POST。POST 请求是最常用的类型，因为它安全并且可以发送大量数据。但这两种方法都会发送值被更改或编辑的数据。因此，未编辑的值或未选中的复选框不会发送到服务器。

那么，让我们看看如何从表单中 POST 未选中的 HTML 复选框。

使用隐藏输入类型

隐藏输入类型是一种既不接受用户输入，也不会显示的输入字段。此输入字段仅用于默认通过 HTTP 请求发送此字段的值。这对于构建数据和数据库非常重要。

如果没有 HTML 表单，我们就无法将数据发送到服务器。为了将未从用户那里获取的额外数据发送到服务器，我们必须在 HTML 中使用隐藏输入类型。

用户可以按照以下语法使用隐藏输入类型来 POST 未选中的 HTML 复选框 -

语法

<input type = "checkbox" id = "Check" name = "CheckBox" value = "1"/>
<input type = "hidden" id = "Checkhidden" name = "CheckBox" value = "0"/>
<script>
if(document.getElementById(" <Checkbox ID here> ").checked) {
   document.getElementById( <Hidden field id here> ).disabled = true;
}
</script>

按照上述语法使用隐藏输入字段。

示例 1

在下面的示例中，我们在表单中使用了复选框来接收用户的输入。我们将看到使用复选框提交数据后得到的结果。我们在表单中添加了七个复选框。点击提交按钮后，我们将从表单获取通过 post 方法发送的数据。

<html>
<body>
   <h2> Using <i> POST method </i> to post the HTML checkboxes </h2>
   <form method="post" id="form" onsubmit="func(); return false">
      Select your Subjects: <br>
      <input type="checkbox" id="group1" name="Subject" value="Math" />
      <label for="group1"> Math </label><br>
      <input type="checkbox" id="group2" name="Subject" value="Science" />
      <label for="group2"> Science </label><br>
      <input type="checkbox" id="group3" name="Subject" value="English" />
      <label for="group3"> English </label> <br>
      <input type="checkbox" id="group4" name="Subject" value="History" />
      <label for="group4"> History </label> <br>
      <input type="checkbox" id="group5" name="Subject" value="Geography" />
      <label for="group5"> Geography </label> <br>
      <input type="checkbox" id="group6" name="Subject" value="Hindi" />
      <label for="group6"> Hindi </label> <br>
      <input type="checkbox" id="group7" name="Subject" value="Information technology" />
      <label for="group7"> Information technology </label> <br>
      <button> Submit </button>
   </form>
   <div id="output"> </div>
   <script>
      function func() {
         const form = document.getElementById('form');
         const formData = new FormData(form);
         const output = document.getElementById('output');
         output.style.color = "red";
         for (const [key, value] of formData) {
            output.innerHTML += `${key}: ${value}` + '<br>';
         }
      }
   </script>
</body>
</html>

在上面的例子中，用户可以看到我们只会获取选中复选框的值，并且只有这些值才会发送到服务器。

示例 2

在下面的例子中，我们使用了隐藏输入类型来将数据发送到服务器，无论复选框是否被选中。我们将隐藏输入类型定义为与表单中其他复选框同名。在脚本中，我们设置了一个条件:如果复选框被选中，则相应的隐藏字段将被禁用。这样，我们就不会获得同一复选框的双重值。

<html>
<body>
   <h2> Using <i> hidden type </i> of input to post unchecked HTML checkboxes </h2>
   <form method="post" action="#" onsubmit="func(); return false" id="form">
      <label for="fname"> Enter your name: </label>
      <input type="text" id="fname" name="Fname" value="" /> <br>
      <label for="lname"> Enter your name: </label>
      <input type="text" id="lname" name="Lname" value="" /> <br> Select your gender: <br>
      <input type="hidden" id="maleHidden" name="Gender" value="He is not a male" />
      <input type="checkbox" id="male" name="Gender" value="male" />
      <label for="male"> Male </label> <br>
      <input type="hidden" id="femaleHidden" name="Gender" value="He is not a female" />
      <input type="checkbox" id="female" name="Gender" value="female" />
      <label for="female"> Female </label> <br>
      <input type="hidden" id="transgenderHidden" name="Gender" value="He is not a transgender" />
      <input type="checkbox" id="transgender" name="Gender" value="transgender" />
      <label for="transgender"> Transgender </label> <br>
      <button> Submit </button>
      <div id="output"> </div>
   </form>
   <script>
      function func() {
         if (document.getElementById("male").checked) {
            document.getElementById('maleHidden').disabled = true;
         }
         if (document.getElementById("female").checked) {
            document.getElementById('femaleHidden').disabled = true;
         }
         if (document.getElementById("transgender").checked) {
            document.getElementById('transgenderHidden').disabled = true;
         }
         const form = document.getElementById('form');
         const formData = new FormData(form);
         const output = document.getElementById('output');
         output.style.color = "red";
         for (const [key, value] of formData) {
            output.innerHTML += `${key}: ${value}` + '<br>';
         }
      }
   </script>
</body>
</html>

在上面的例子中，用户可以看到我们可以使用 hidden 作为 HTML 中的输入类型来发布未选中的 HTML 复选框。

在本教程中，我们学习了如何发布未选中的 HTML 复选框。