Layui多选框提交时只能获取到最后一个选中的值的解决办法，以及thymeleaf中多选框回显的写法

往事不堪回首..

已于 2023-11-06 11:25:15 修改

阅读量814

点赞数

文章标签： layui 前端 javascript

于 2023-06-29 09:47:27 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/131449744

版权

文章讲述了在使用layui框架时遇到的一个问题，即在提交表单时，多选checkbox的值只能获取到最后一个选中的。作者尝试了网上的多种解决方案但未成功。最终，作者通过在提交按钮的监听事件中获取所有选中checkbox的值，将其转化为字符串并赋值给表单字段，然后使用AJAX提交给后台，实现了正确获取所有选中值的功能。同时，文中还提及了Thymeleaf中多选框回显的实现方法。

摘要由CSDN通过智能技术生成

 <div class="layui-card">
					<div class="layui-card-header layui-this">包装类型</div>
					<div class="layui-card-body">
					  <input type="checkbox" name="aa" title="1A-100" value="1A-100" lay-skin="tag" checked lay-filter="demo-checkbox-filter">
					  <input type="checkbox" name="aa" title="1000" value="1000" lay-skin="tag" lay-filter="demo-checkbox-filter"> 
					  <input type="checkbox" name="aa" title="2000" value="2000" lay-skin="tag" lay-filter="demo-checkbox-filter"> 
					  <input type="checkbox" name="aa" title="3000" value="3000" lay-skin="tag" lay-filter="demo-checkbox-filter"> 
					  <input type="checkbox" name="aa" title="4000" value="40000" lay-skin="tag" lay-filter="demo-checkbox-filter">  <!--disabled--> 
					  <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
					</div>
				  </div>

以上是我项目中用到的实例，当我提交时后台只能拿到最后选中的一个值，

网上找了很多方法，但是我测试时都是无效的，

后来我发现在checkbox添加lay-filter="demo-checkbox-filter"然后每次选中触发方法时获取多选框所有值的确是没办法获取到，并不是网上的方法不对，

最后在监听提交按钮的方法上获取多选框的值再赋值给表单，最后提交给后台才拿到

form.on('submit(saveBtn)', function(data) {
	var arr_box = [];
	$('input[type=checkbox]:checked').each(function() {
			arr_box.push($(this).val());
	});//在提交方法中遍历多选框才终于拿到多选框的值了
	data.field.packType = arr_box.join(",");//将数组转成字符串
    
    $.ajax({
		type: 'POST',
		url: '/xxxxxxxx/xxx',
		data: data.field,
		success: function(responseData) {
              if (responseData.code === 200) {
					layer.msg(responseData.msg, {time: 500,icon: 1}, function() {
					    var iframeIndex = parent.layer.getFrameIndex(window.name);
					    parent.layer.close(iframeIndex);
					    parent.searchBtn.click();//触发父页面的搜索按钮（searchBtn是按钮的ID）
			        });
			  } else {
					layer.msg(responseData.msg, {time: 3000,icon: 5});
			  }
	    }
	});

顺便记录下thymeleaf中多选框回显的方法，第一次用，找了半天：

<!--  list包含另一个list遍历中的某个值 ,以下是遍历多选框的值packTypeList，当entity.packTypeList中包含 多选框的值就选中 -->
<input type="checkbox" name="packType" th:each="packType:${packTypeList}" th:value="${packType}" th:title="${packType}" lay-skin="tag"
	   th:checked="${#lists.contains(entity.packTypeList, packType)}" />