layui的全选和反选

效果图如下
layui的全选和反选_第1张图片

  1. html代码如下
<div id="divCover" class="layui-form-item">
	<input type="checkbox" name="checkAll" title="全选" lay-filter="checkAllFilter">
	<input type="checkbox" name="checkOld" title="反选" lay-filter="checkOldFilter">
	<br />
	<input type="checkbox" name="column" id="商家名称" title="商家名称" lay-skin="primary">
div>
  1. js代码
//监听全选
form.on('checkbox(checkAllFilter)', function (data) {
    //var express = $('input[name="column"]:checked').val();
    let isCheck = data.elem.checked;//开关是否开启,true或者false
    if (isCheck) {
        $("input[name='column']").prop("checked", "checked");
    } else {
        $("input[name='column']").prop("checked", false);
    }
    form.render();
});

//监听反选
form.on('checkbox(checkOldFilter)', function (data) {
    var column = $("input[name='column']");
    //console.log(column)
    for (i = 0; i < column.length; i++) {
        //console.log(column[i].id)
        let id = column[i].id;
        if (column[i].checked) {
            $("input[id='" + id + "']").prop("checked", false);
        } else {
            $("input[id='" + id + "']").prop("checked", "checked");
        }
    }
    form.render();
});

你可能感兴趣的:(layui,javascript,html)