layui 獲取多個復選框checkbox值時，只能獲取到最后一個checkbox的值

原文鏈接：https://blog.csdn.net/qq_27579471/article/details/102528337

問題：layui的form中，選中多個checkbox復選框（name都相同）時，data.field中只會有最后一個選中的checkbox的值！

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">復選框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like" title="寫作">
      <input type="checkbox" name="like" title="閱讀">
      <input type="checkbox" name="like" title="發呆">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //監聽提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

解決方法：

1.layui提交checkbox復選框多個值的時候只會提交最后一個的值，故需要手動處理，要么拼接成字符串傳到后台用字符串接收后再切割成數組，要么組裝成js數組傳到后台直接用數組接收；
2.ajax提交數組到后台，需要設置參數traditional: true。

//獲取checkbox數據,組裝成數組!!!!!!
 var like=[]; 
$('input[name="like"]:checked').each(function(index, domEle){ 
　　like.push($(this).val()); 
}); 
data.field.noRepeatUploadBanks = noRepeatUploadBanks;

layui.use('form', function(){
var form = layui.form;
form.on('submit(submit)', function(data){
//console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: "value"}

//獲取checkbox數據,組裝成數組!!!!!!
var noRepeatUploadBanks =[];
$('input[name="noRepeatUploadBanks"]:checked').each(function(index, domEle){
noRepeatUploadBanks.push($(this).val());
});
data.field.noRepeatUploadBanks = noRepeatUploadBanks;

var url="${pageContext.request.contextPath}/admin/doEditSysSetting";

layer.confirm('您確認保存設置嗎', {icon: 3, title:'提示'}, function(index){
layer.close(index);//關閉詢問彈框
$.ajax({
type: "POST",
url: url,
data: data.field,
traditional: true, //是否使用傳統的方式淺層序列化,若有數組參數或對象參數需要設置true!!!!!!
dataType:"json",
success: function(returnData){
if(returnData.code==1){
//修改隱藏input[oldCrontabStatusInt]的值
var new_oldCrontabStatusInt = returnData.obj;
$('input[name=oldCrontabStatusInt]').val(new_oldCrontabStatusInt);
layer.msg('保存成功', {
icon: 1,
time: 20000, //20s后自動關閉
btn: ['確定']
}, function(){
parent.layer.closeAll();
});
}else{
layer.msg(returnData.msg, {icon: 2});
}
}
});
});

return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
});