单个checkbox
html部分
<div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-inline"> <input type="checkbox" name="ck" id="ck" title="点击事件" lay-filter="ck"> </div> </div>
js部分
<script> layui.use(['form'], function () { var $ = layui.$, form = layui.form, layer = layui.layer; //单选框事件 form.on('checkbox(resource)', function(obj){ if (obj.elem.checked == true) { //选中事件 }else{ //未选中事件 } }); }); </script>
多个checkbox 实现单击一个checkbox多选其他checkbox
html
<div class="layui-input-block"> <table class="layui-table"> <thead> <tr> <th>父级单选框</th> <th>子单选框</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" lay-filter="all" value="getChild" lay-skin="primary" title="父级单选框"> </td> <td class="getChild"> <input type="checkbox" name="box" value="a" title="a"> <input type="checkbox" name="box" value="b" title="b"> <input type="checkbox" name="box" value="c" title="c"> <input type="checkbox" name="box" value="d" title="d"> </td> </tr> <tr> <td> <input type="checkbox" lay-filter="all" value="getChild" lay-skin="primary" title="父级单选框"> </td> <td class="getChild"> <input type="checkbox" name="box" value="a" title="a"> <input type="checkbox" name="box" value="b" title="b"> <input type="checkbox" name="box" value="c" title="c"> <input type="checkbox" name="box" value="d" title="d"> </td> </tr> <tr> <td> <input type="checkbox" lay-filter="all" value="getChild" lay-skin="primary" title="父级单选框"> </td> <td class="getChild"> <input type="checkbox" name="box" value="a" title="a"> <input type="checkbox" name="box" value="b" title="b"> <input type="checkbox" name="box" value="c" title="c"> <input type="checkbox" name="box" value="d" title="d"> </td> </tr> </tbody> </table> </div>
js
<script> layui.use(['form'], function () { var $ = layui.$, form = layui.form, layer = layui.layer; //单选框事件 form.on('checkbox(all)', function(data){ //获取当前checkbox的value var cname = data.value; //根据刚才获取的value绑定子元素框内的子checkbox var child = $("." + cname + " input[type='checkbox']"); //遍历子元素,随父级checkbox统一控制选中状态 child.each(function(index, item){ item.checked = data.elem.checked; }); //刷新checkbox渲染 form.render('checkbox'); }); //表单提交 form.on('submit(ALL-submit)', function(data){ //获取checkbox数据,拼成数组 var arr = []; $('input[name="box"]:checked').each(function(index, obj){ arr.push($(this).val()); }); //赋值到表单数据 data.field.am_id = arr; //Ajax提交 $.post('/url', {data:data.field}, function(res){ //返回值处理 }); }); }); </script>
备忘用.
1 Comment
form.on(‘checkbox(resource)’, function(obj){
if (obj.elem.checked == true) {
//选中事件
}else{
//未选中事件
}
});
这句中的resource应该换为html中’lay-filter=”ck”‘的ck