layui获取checkbox选中状态及点击事

单个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>