在本教程中，我们将学习 POST 未选中的 HTML 复选框。
要与用户交互，有必要通过网站获取他们的输入或数据。 HTML 表单用于获取用户的输入。表格对于获取网站上的用户数据至关重要。这些表单获取用户的输入并使用 HTTP 请求将数据发送到服务器。
HTTP 请求有两种类型，一种是 GET，另一种是 POST。 POST 请求是最常用的类型，因为它安全并且可以发送大量数据。但这两种方法都会发送其值已更改或编辑的数据。因此，未编辑的值或未选中的复选框不会发送到服务器。
那么，让我们看看如何从表单中 POST 未选中的 HTML 复选框。
使用隐藏输入类型
隐藏输入类型是一种输入字段，既不会接受用户的输入，也不会显示。该输入字段默认仅用于通过 HTTP 请求发送该字段的值。这是形成数据和数据库的一个非常重要的领域。
如果没有 HTML 表单，我们就无法将数据发送到服务器。要在服务器上发送不是从用户获取的附加数据，我们必须使用 HTML 中的隐藏输入类型。
用户可以按照以下语法使用隐藏输入类型来发布未选中的 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>
在上面的示例中，用户可以看到我们可以使用隐藏作为 HTML 中的输入类型来发布未选中的 HTML 复选框。
在本教程中，我们学习了如何 POST 未选中的 HTML 复选框。
