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

 <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)}" />

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

往事不堪回首..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值