添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

多个checkbox 实现单击一个checkbox多选其他checkbox

<div class="layui-input-block"> <table class="layui-table"> <thead> <th>父级单选框</th> <th>子单选框</th> </thead> <tbody> <input type="checkbox" lay-filter="all" value="getChild" lay-skin="primary" title="父级单选框"> <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"> <input type="checkbox" lay-filter="all" value="getChild" lay-skin="primary" title="父级单选框"> <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"> <input type="checkbox" lay-filter="all" value="getChild" lay-skin="primary" title="父级单选框"> <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"> </tbody> </table> <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>