layui获取checkbox复选框值 - dongsir
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部分
代码：
温馨提示：答案为网友推荐，仅供参考
第1个回答 2017-11-16
根据多选框name来获得选中的值可用如下jquery代码实现123$("input:checkbox[name='test']:checked").each(function(){//遍历name=test的多选框$(this).val();//每一个被选中项的值});实例演示：给出两组多选框，点击按钮后分别获得
第2个回答 2017-11-16
根据多选框name来获得选中的值可用如下 jquery代码实现
1
2
3
$("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框
$(this).val(); // 每一个被选中项的值
});
实例演示：给出两组多选框，点击按钮后分别获得两组中被选择的项目
示例代码如下
创建Html元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="box">
<span>请输入用户名，限定字母、数字或下划线的组合：</span>
<div class="content">
<span>水果：</span>
<input type="checkbox" name="fruit" value="梨子"/>梨子
<input type="checkbox" name="fruit" value="李子"/>李子
<input type="checkbox" name="fruit" value="栗子"/>栗子
<input type="checkbox" name="fruit" value="荔枝"/>荔枝
<span>蔬菜：</span>
<input type="checkbox" name="vegetable" value="青菜"/>青菜
<input type="checkbox" name="vegetable" value="萝卜"/>萝卜
<input type="checkbox" name="vegetable" value="土豆"/>土豆
<input type="checkbox" name="vegetable" value="茄子"/>茄子
</div>本回答被网友采纳
1
2
3
$("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框
$(this).val(); // 每一个被选中项的值
});
实例演示：给出两组多选框，点击按钮后分别获得两组中被选择的项目
示例代码如下
创建Html元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="box">
<span>请输入用户名，限定字母、数字或下划线的组合：</span>
<div class="content">
<span>水果：</span>
<input type="checkbox" name="fruit" value="梨子"/>梨子
<input type="checkbox" name="fruit" value="李子"/>李子
<input type="checkbox" name="fruit" value="栗子"/>栗子
<input type="checkbox" name="fruit" value="荔枝"/>荔枝
<span>蔬菜：</span>
<input type="checkbox" name="vegetable" value="青菜"/>青菜
<input type="checkbox" name="vegetable" value="萝卜"/>萝卜
<input type="checkbox" name="vegetable" value="土豆"/>土豆
<input type="checkbox" name="vegetable" value="茄子"/>茄子
</div>本回答被网友采纳
相似回答