form表单提交数组类型数据(CheckBox等)

本文介绍了如何在HTML form表单中处理数组类型的提交数据,特别是CheckBox等元素,通过示例展示了数据拼接的方法,并说明了后端如何以String类型接收并解析这些数据。
摘要由CSDN通过智能技术生成

最简单的,直接提交form:

<form action="/upload" id="form">
   <input type="text" name="name" th:value="${name}">
    <div>
        <input type="checkbox" name="location" value="东"><input type="checkbox" name="location" value="南"><input type="checkbox" name="location" value="西">西
        <input type=&
在 HTML 中,checkbox 是一种 input 类型,用于让用户选择一项或多项选项。当用户提交包含 checkbox 的表单时,需要获取用户所选的值。 可以通过以下方式来获取 checkbox 的值: 1. 使用 JavaScript: ```html <form> <input type="checkbox" name="fruit" value="apple"> Apple<br> <input type="checkbox" name="fruit" value="banana"> Banana<br> <input type="checkbox" name="fruit" value="orange"> Orange<br> <button onclick="getCheckboxValue()">Submit</button> </form> <script> function getCheckboxValue() { var checkboxes = document.getElementsByName("fruit"); var values = []; for (var i=0; i<checkboxes.length; i++) { if (checkboxes[i].checked) { values.push(checkboxes[i].value); } } console.log(values); } </script> ``` 在此示例中,我们使用了 `document.getElementsByName()` 方法来获取所有名称为 "fruit" 的 checkbox 元素,然后使用 `for` 循环遍历所有 checkbox,如果 checkbox 被选中,则将它的值添加到数组中。最后,我们将数组打印到控制台。 2. 使用 jQuery: ```html <form> <input type="checkbox" name="fruit" value="apple"> Apple<br> <input type="checkbox" name="fruit" value="banana"> Banana<br> <input type="checkbox" name="fruit" value="orange"> Orange<br> <button id="submit-btn">Submit</button> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $("#submit-btn").click(function() { var values = []; $("input[name='fruit']:checked").each(function() { values.push($(this).val()); }); console.log(values); }); </script> ``` 在此示例中,我们使用 jQuery 的选择器来获取所有名称为 "fruit" 的 checkbox 元素,并使用 `each()` 方法遍历所有选中的 checkbox。然后,我们将它们的值添加到数组中,并将数组打印到控制台。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值