“POST未选中的HTML复选框”

"POST未选中的HTML复选框"

在本教程中,我们将学习 POST 未选中的 HTML 复选框。

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

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

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

立即学习“前端免费学习笔记(深入)”;

使用隐藏输入类型

隐藏输入类型是一种输入字段,既不会接受用户的输入,也不会显示。该输入字段默认仅用于通过 HTTP 请求发送该字段的值。这是形成数据和数据库的一个非常重要的领域。

如果没有 HTML 表单,我们就无法将数据发送到服务器。要在服务器上发送不是从用户获取的附加数据,我们必须使用 HTML 中的隐藏输入类型。

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

语法

if(document.getElementById("  ").checked) {   document.getElementById(  ).disabled = true;}

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

示例 1

在下面的示例中,我们使用表单中的复选框来获取用户的输入。我们将看到在使用复选框发布数据后我们会得到什么。我们在表单中添加了七个复选框。点击提交按钮后,我们将从表单中获取post方法发送的数据。

   

Using POST method to post the HTML checkboxes

Select your Subjects:







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}` + '
'; } }

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

示例 2

在下面的示例中,无论复选框是否选中,我们都使用隐藏输入类型将数据发送到服务器。我们正在定义与表单中其他复选框同名的隐藏输入类型。在脚本中,我们给出了一个条件,如果选中该复选框,则受尊重的隐藏字段将被禁用。这样,我们将不会获得同一个复选框的双精度值。

   

Using hidden type of input to post unchecked HTML checkboxes



Select your gender:



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}` + '
'; } }

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

在本教程中,我们学习了如何 POST 未选中的 HTML 复选框。

以上就是”POST未选中的HTML复选框”的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551508.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:48:03
下一篇 2025年12月21日 21:48:16

发表回复

登录后才能评论
关注微信