layui獲取checkbox複選框值
阿新 • • 發佈：2020-12-11
獲取layui表單複選框已選中的資料
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.form.checkbox 獲取選中</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <form class="layui-form"> <!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素--> <div class="layui-form-item"> <label class="layui-form-label">複選框</label> <div class="layui-input-block"> <input type="checkbox" name="CSDN" lay-filter="like" title="複選框一" value="dongsir"> <input type="checkbox" name="CSDN" lay-filter="like"title="複選框二" value="董先生"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">開關關</label> <div class="layui-input-block"> <input type="checkbox" name="switch" lay-skin="switch" value="董輝"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">開關開</label> <div class="layui-input-block"> <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即提交</button> </div> </div> </form> <script src="layui/layui.js"></script>
JS
layui.use('form', function(){
var form = layui.form,
$ = layui.$;
//各種基於事件的操作。
form.on('submit(*)', function(data){
//將頁面全部複選框選中的值拼接到一個數組中
var arr_box = [];
$('input[type=checkbox]:checked').each(function() {
arr_box.push($(this).val());
});
//陣列
console.log(arr_box);
// ["董先生的CSDN"]
return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
});
如果需要字串的話，再將陣列轉為字串
console.log(arr_box.toString());
// dongsir,董先生,董先生的CSDN
如果需要自定義分割字元的字串
console.log(arr_box.join(","));
// dongsir,董先生,董先生的CSDN
轉載：https://www.cnblogs.com/sirdong/p/11579485.html
-------------------------------------------------------------------
form.on('submit(win-submit)', function(data){
$.ajax({
type: 'POST',
url: '/xxxx/xxxxx/add',
data: $(data.form).serializeArray(),
success: function (data) {
if(data.success){
...
}else{
....
}
},
error: function(data) {
....
},
dataType: "json"
});
return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
----------------------------------------------------------------自己專案------------------------------------------------
//監聽提交
form.on('submit(demo1)', function (data) {
var index = layer.msg('正在檢測中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:3000});
if(data.field.domain_name == ""){
layer.msg("域名不能為空！");
return false;
}
if(data.field.word_by_domain == ""){
layer.msg("關鍵詞不能為空！");
return false;
}
var arr_box = [];
$('input[type=checkbox]:checked').each(function() {
arr_box.push($(this).val());
});
//陣列
console.log(arr_box);
$.ajax({
type:'post',
url:"{:url('agent/diy_word/save')}",
data:data.field,
success:function (res) {
// console.log(res);
if(res.status == 200){
layer.close(index);
table.render({
elem: '#currentTableId',
url: "{:url('agent/diy_word/json_list')}",
toolbar: '#toolbarDemo',
defaultToolbar: [ 'exports', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
title: '自定義新增關鍵詞列表',
cols: [[
{type: "checkbox", width: 50, fixed: 'left'},
{field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'},
{field: 'domain_name', width: 200, title: '域名'},
{field: 'search_type_name', width: 130, title: '搜尋引擎'},
{field: 'word_by_domain', width: 180, title: '關鍵詞'},
{field: 'rank', width: 100, title: '排名'},
{field: 'index', width: 100, title: '指數'},
{field: 'price', width: 100, title: '價格'},
{fixed: 'right',title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
id: 'testReload',
parseData: function(res){ //將原始資料解析成 table 元件所規定的資料
return {
"code": res.code, //解析介面狀態
"msg": res.msg, //解析提示文字
"count": res.count, //解析資料長度
"data": res.data.data //解析資料列表
};
},
where: {
//傳值 startDate : startDate,
domain_name:data.field.domain_name,
search_type_id:arr_box
},
request: {
pageName: 'page' // 頁碼的引數名稱，預設：page
, limitName: 'size' //每頁資料量的引數名，預設：limit
//頁碼和顯示數量
}
});
}else if(res.status == 400) {
layer.close(index);
layer.msg(res.msg,{time: 1200,offset: '200px' },function () {
//location.reload()
})
}else if(res.status == 10001){
layer.close(index);
layer.msg(res.msg,{time:1200,offset:'200px'},function () {
// location.reload()
})
}
}
});
return false;
});