layui 复选框全选
layui 复选框实现多选全选
·
- script代码
layui.use(['layer', 'form', 'laydate'], function () {
var laydate = layui.laydate;
var form = layui.form;
var layer = layui.layer;
var $ = layui.$;
//全选被选中 其他都被勾选
form.on('checkbox(checkall)', function (data) {
var id = data.value;
console.log(id)
//这里实现勾选
$('.checkone').each(function (index, item) {
item.checked = data.elem.checked;
});
form.render('checkbox');
});
//有一个未选中全选取消选中
form.on('checkbox(c_one)', function (data) {
var item = $(".checkone");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#c_all").prop("checked", false);
form.render('checkbox');
break;
}
}
//如果都勾选了 勾上全选
var all = item.length;
for (var i = 0; i < item.length; i++) {
if (item[i].checked == true) {
all--;
}
}
if (all == 0) {
$("#c_all").prop("checked", true);
form.render('checkbox');
}
});
//取值
form.on('checkbox', function (data) {
console.log(data)
var myaaa = document.getElementsByName("aaa")
var s = '';
if (data.value == 0 && $("#c_all").is(":checked")) {
s = 0 + ',';
} else if ($("#c_all").is(":checked")) {
s = 0 + ',';
} else {
for (var i = 0; i < myaaa.length; i++) {
if (myaaa[i].checked) s += myaaa[i].value + ',';
}
}
$("#doorNum").attr("value", s.slice(0, s.length - 1))
});
});
2.html页面
<div class="layui-form-item">
<input type="hidden" name="doorNum" id="doorNum" class="layui-input" lay-verify="required|doorNum" value="0"/>
<label class="layui-form-label required" style="width: 145px;">允许通过的门号</label>
<div class="layui-input-block" style="width:71.5%">
<input type="checkbox" lay-filter="checkall" name="" id="c_all" title="全选" value="0" checked>
<tbody>
<!-- <input type="checkbox" name="ck[0]" class='checkone' title="全选" value="0" > -->
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="一号门" value="1" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="二号门" value="2" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="三号门" value="3" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="四号门" value="4" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="五号门" value="5" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="六号门" value="6" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="七号门" value="7" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="八号门" value="8" checked>
<input type="checkbox" name="aaa" class='checkone' lay-filter="c_one" title="九号门" value="9" checked>
</tbody>
</div>
</div>
更多推荐
已为社区贡献1条内容
所有评论(0)