精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui复选框的全选与取消实现方法,具有很好参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前语:本来我是不想写layui框架博客,有时候数据经过layui渲染后原生写法就取不到值了,一定要用它框架写法,实在蛋疼,故写之,以后用到可以省点时间去度娘! HTML: <div id="top-<?...

    前语:本来我是不想写layui框架的博客的,有的时候数据经过layui渲染后原生的写法就取不到值了,一定要用它框架的写法,实在蛋疼,故写之,以后用到可以省点时间去度娘!

     

    HTML:

    <div id="top-<?php echo !empty($val['menu_id'])?$val['menu_id']:0; ?>" style="margin-top: 1%;">

    <!-- 菜单, 注意这里一定要加上标签 lay-filter,下面要用这参数 --> <input lay-filter="menu" lay-skin="primary" type="checkbox" value="<?php echo !empty($val['menu_id'])?$val['menu_id']:0; ?>" title="<?php echo !empty($val['menu_name'])?$val['menu_name']:'-'; ?>">
    <!-- 分类 --> <div class="" style="margin-left: 4%;"> <?php foreach($val['category_list'] as $v){ ?> <input name="category" lay-skin="primary" type="checkbox" value="<?php echo !empty($v['category_id'])?$v['category_id']:0; ?>" title="<?php echo !empty($v['category_name'])?$v['category_name']:'-'; ?>"> <?php } ?> </div>

    </div>

     

    JS:

        // layui框架写法(全选)
        layui.use('form', function(){
            var form = layui.form;
         //这里的 menu 就是 HTML上面的lay-filter值,就固定一个值就好
            form.on('checkbox(menu)', function(data){
              var id = data.value;
              //这里实现勾选 
              $('#top-'+id+' input[name=category]').each(function(index, item){
                 item.checked = data.elem.checked;
              });
              form.render('checkbox');
              
              // console.log(data.elem); //得到checkbox原始DOM对象
              // console.log(data.elem.checked); //是否被选中,true或者false
              // console.log(data.value); //复选框value值,也可以通过data.elem.value得到
              // console.log(data.othis); //得到美化后的DOM对象
            });  
        });

              // 获取选中的分类值
              var check_arr = [];
              $('input[name=category]:checked').each(function(){
                  check_arr.push($(this).val());
              });
              if(check_arr.length == 0){
                 layer.msg("还未选择分类", {icon: 7, time:1500});return;
              }

     

    效果图:

     

    转载于:https://www.cnblogs.com/pyspang/p/9648034.html

    展开全文
  • 问题:当我选择标题栏的复选框的时候,数据表格中的数据复选框并没有选中,全选效果失效 2,代码 <div style="padding: 3px 0;"> <table id="testlayuitable" lay-filter="testlayuitable"></...

    1,如图

    问题:当我选择标题栏的复选框的时候,数据表格中的数据复选框并没有选中,全选效果失效
    在这里插入图片描述

    2,代码

    
      <div style="padding: 3px 0;">
          <table id="testlayuitable" lay-filter="testlayuitable"></table>
      </div>
    
      
      function business(data) {
            var table = layui.table;
            //第2个实例
            table.render({
                id: 'testlayuitable',
                elem: '#testlayuitable',
                height: CLIENTHEIGHT-60,
                size: 'sm' ,//小尺寸的表格
                page:true,
                limits:[15,30,50,100,200,500,1000,2000,5000,10000],
                limit:15,
                cols: [
                    [  //标题栏
                        {type:'checkbox'}
                        ,{field: 'unitname', title: '名称',align:"left", minWidth: 260, sort: false, filter: true}
                        ,{field: 'unitcode', title: '代码',align:"center", minWidth: 80, sort: false, filter: true}
                    ]
                ],
                data: data ? data : [],
                done: function () {
                    layui.soulTable.render(this)
                }
            });
        }
        
    

    3,解决

    对比了正常的代码,也没发现异常,没办法,只能将正常的代码拷贝过来,

    然后将cols更替,经过程序对比和筛选,最终发现问题

    罪魁祸首是 layui.soulTable.render(this)

    你使用了这个插件,但是没有引入他,所以不能识别,就会报错,解决办法,要么删除该调用,要么引入插件

    3.1 将其删除即可

    
     done: function () {
          //layui.soulTable.render(this)
      }
                
    

    3.2 或者引入 soulTable 插件

    
     layui.config({
            base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
            version: 'v1.5.10' // 插件版本号
        }).extend({
            soulTable: 'soulTable/soulTable'
        });
        
        layui.use(['form','table','soulTable'], function() {
            searchBtn();//调用数据表格查询函数
        });
        
    
    展开全文
  • 引入外部文件 ...script src="layui/layui.js"></script> <link rel="stylesheet" href="layui/css/layui.css"> HTML代码 <form class="layui-form"> <div class="layui-form-it.

    在这里插入图片描述

    引入外部文件

        <script src="../js/jquery.min.js"></script>
        <script src="layui/layui.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
    

    HTML代码

    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">可见班级</label>
            <input type="checkbox" name="" lay-skin="primary" id="class_all" lay-filter="class_all" title="全选">
            <div class="layui-input-block" id="check">
                <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600110" value="600110">
                <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600120" value="600120">
                <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600130" value="600130">
                <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600140" value="600140">
                <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600150" value="600150">
            </div>
        </div>
    </form>
    <button id="btn" class="layui-btn">提交</button>
    

    javascript代码

     layui.use(['form'], function () {
            let form = layui.form;
            //全选
            form.on('checkbox(class_all)', function (data) {
                var a = data.elem.checked;
                if (a == true) {
                    $(".class_one").prop("checked", true);
                    form.render('checkbox');
                } else {
                    $(".class_one").prop("checked", false);
                    form.render('checkbox');
                }
            });
    
            //有一个未选中全选取消选中;
            form.on('checkbox(class_one)', function (data) {
                var item = $(".class_one");
                for (var i = 0; i < item.length; i++) {
                    if (item[i].checked == false) {
                        $("#class_all").prop("checked", false);
                        form.render('checkbox');
                    }
                }
            });
        });
    
        $(function () {
            $("#btn").click(function () {
                var checkValue = [];
                $('#check input[type=checkbox]:checked').each(function () {
                    checkValue.push($(this).val());
                });
                if (checkValue == "") {
                    alert("请选择选项!");
                    return false;
                } else {
                    console.log(checkValue);
                }
    
            })
        })
    

    Done !

    展开全文
  • 今天给大家带来初识Avalon的第二篇文章,复选框全选操作和Avalon+layUI的分页。

    前言

      今天给大家带来初识Avalon的第二篇文章,复选框的全选操作和Avalon+layUI的分页。


    Demo1:神奇的全选反选

    Avalon的双工绑定duplex和监听事件$watch

      第一篇文章的第一个例子大家是否还记得,文本框输入什么内容,下面的页面就显示什么内容,这里就用到了Avalon的双工绑定。那什么是双工绑定呢,就是avalon定义的变量和表单中的value值进行绑定,就像连体婴儿一样,无论哪一个值发生变化,其他的值都会跟着发生改变。


       我们都知道,复选框也是有value值的,所有的复选框的值组合起来,就是一个数组,那我们想一想,选中复选框的值组成的数组的长度,如果等于复选框的个数,那么是不是就代表复选框全部选中了呢;如果我们点击全选按钮,将全部复选框的值都赋给选中复选框组成的数组,那么是不是就将复选框全部选中了呢。顺着这个思路,我们往下想:


    1.那么在avalon里,我们就要定义出这个数组


    2.接着我们再想,全选的状态是不是需要一个变量表示,false表示没有全选,true表示已经全选,如果值为true,那全选按钮是选中状态,为false则反之。


    3.然后,怎么样才能在点击全选的时候,把复选框全部的值赋给上面的checkBoxSel呢,我们是不是又需要定义一个数组,装全部的复选框的值。


    4.好,变量定义完了,那我们是不是要定义一个方法:点击全选的时候,所有的复选框选中,再次点击的时候,所有的复选框不选中。


    5.再想想,我们还需要定义一个监听事件,监听选中复选框的数量的变化,如果选中复选框的长度等于总个数,那么全选选中,否则没有全选。

    这里要引入avalon$watch事件,就是avalon会自动监听自己变量的变化,如果变量有变化,则会调用我们定义的方法:


    6.还记得我们定义了一个数组,表示所有复选框的值吗,在加载表格数据的时候,给这个复选框赋予所有复选框的值:


    7.HTML标签加上avalon的属性


    到此我们的编码就完成了,看一下效果吧


    Demo2avalon+layui分页

    Layui算是国内比较出名的前台样式模板了,她的作者贤心更是一名充满情怀和少女心的壮汉...

    Layui的官网

    http://www.layui.com/

    希望大家多支持国内的作者

    1.导入layuijs文件和css文件:


    2.定义一个分页的div层:


    3.初始化分页插件:



    效果图如下:



    源码:

    <!DOCTYPE html>
    <html lang="cn">
    <head>
        <meta charset="UTF-8">
        <title>AvalonDemo4</title>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/avalon.shim.js"></script>
        <script src="layui/layui.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body ms-controller="AvalonDemo">
    <div style="width: 800px">
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col width="100">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th><input type="checkbox" ms-duplex-checked="ifAllSelect" ms-click="allSelectClick"><span>全选</span></th>
                <th>编号</th>
                <th>昵称</th>
                <th>性别</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody>
            <tr ms-repeat-el="tableData">
                <td><input type="checkbox" ms-attr-value="el.stuNum" ms-duplex="checkBoxSel"></td>
                <td>{{el.stuNum}}</td>
                <td>{{el.name}}</td>
                <td>{{el.sex}}</td>
                <td>人生就像是一场修行</td>
            </tr>
            </tbody>
        </table>
        <div id="layUIPage"></div>
    </div>
    </body>
    <script type="application/javascript">
        //avalon初始化
        var vm = avalon.define({
            $id:"AvalonDemo",
            tableData:[],  //初始化数组,用来接收表格数据
            currentPage:1, //初始化页码,默认显示第一页
            totalPage:1,   //初始化总页数,默认为1
            ifAllSelect:false,//全选标记,默认为fasle,没有全选
            checkBoxData:[],  //所有的复选框
            checkBoxSel:[],   //已选中的复选框
            allSelectClick:function () {   //全选点击事件
                if(vm.ifAllSelect == true){
                    vm.checkBoxSel = vm.checkBoxData;     //如果全选选中,则已选中复选框等于全部复选框
                }else{
                    vm.checkBoxSel = [];    //如果取消全选,所有已经中的复选框清空
                }
            }
        });
        vm.$watch("checkBoxSel.length",function () {  //监听已选中复选框的数量的变化
            if (vm.checkBoxData.length == vm.checkBoxSel.length){
                vm.ifAllSelect=true;    //如果已选中的复选框的数量和全部的复选框的数量一样,则为全选
            }else {
                vm.ifAllSelect=false;   //反之为非全选
            }
        });
        //Avalon定义结束
    
        //加载表单数据方法
        function loadTableData(){
            var strData={"currentPage":vm.currentPage};
            $.ajax({
                type:"post",
                data:strData,
                url:"showData.action",
                success:function (data) {
                    vm.tableData=data.stuList;  //表格数据
                    vm.totalPage=data.totalPages;   //总页数
                    //给复选框初始化
                    for(var i=0; i<data.stuList.length; i++){
                        vm.checkBoxData.push(data.stuList[i].stuNum.toString());
                    }
                    layui.use(['laypage', 'layer'], function() {
                        var laypage = layui.laypage
                            , layer = layui.layer;
                        laypage({
                            cont: 'layUIPage'
                            ,pages: vm.totalPage //总页数
                            ,groups: 5  //连续显示分页数
                            ,curr : vm.currentPage    //当前页
                            ,skin : '#d2d2d2'
                            ,jump: function(obj,first) {
                                if (!first) {
                                    vm.currentPage=obj.curr;
                                    loadTableData();
                                }
                            }
                        });
                    });
                }
            });
        }
        loadTableData();
    
    
    </script>
    </html>
    源码下载地址:

    http://download.csdn.net/download/u014701246/9897738


    展开全文
  • 1.其中 id为基础参数 id 对应值 2. layui.use(['layer', 'table'], function () { var table = layui.table; table.on('checkbox(table-bus)', function (obj) { var checkStatus = table...
  • layui表格复选框回显

    千次阅读 2019-06-27 11:31:17
    必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true 从文档中我们看到,当数据中,增加一个字段LAY_CHECKED,并且为true,就会勾选上。我们就可以按照规则,去处理我们要勾选数组...
  • 在之前版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中选择操作。1.layui版本号为 v1.0.9 rls版本(当前最新版本)...
  • //复选框监听事件 table.on('checkbox(language)', function (obj) { tr = obj.tr; if (obj.checked == true) { debugger chechData.push(obj.data); } else { //未选中时移除 for (var i = ...
  • 需要达到目的:ajax()异步请求后台时,需要传入表格里复选框选中id值注意:在渲染form on 方法done里面加入done:function(res){table_data=res.data;}将复选框选中id加入数组中,然后传递到后台作为ids...
  • table.on('checkbox(currentTableFilter)', function (obj) { debugger if (obj.checked == true) { if (obj.type == 'all') { //点击全选 $('.layui-table-bo...
  • 在之前版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)...
  • 复选框全选和删除

    2017-05-18 14:40:00
    1、jsp页面全选框 <input onclick="swapCheck()" name="checkbox" type="checkbox" value="no">...input type="button" class="layui-btn" onclick="return deptDelete()" value="删除"> 3、js中...
  • 问一下,我用复选框的时候,但需要在表头,复选框边上加上“全选”二个字,加了title='全选'没有效果![输入图片说明](https://images.gitee.com/uploads/images/2021/0128/204232_eedc7793_8629992.png "屏幕截图....
  • //试题复选框全选事件 form.on('checkbox(c_all)', function (data) { var a = data.elem.checked; if (a === true) { $(".question").prop("checked", true); form.render('checkbox'); } else { $(".question")....
  • 必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。true上面这段话描述不清楚,他意思是当我们想默认全选的时候就在列上添加这个属性.其实这个属性是可以在每一行数据上面单独添加. 我们在...
  • 项目需求,可以用复选框勾选项目进行提交,如下表IDID测试项标定参数标定值我们已经获取到了表中所有行数据,全选,部分选都可行,不用选复选框遍历方式去获取数据table.on('checkbox(test3)', function(obj){...
  • 一、layui 实现表单中多选框的全选功能,代码如下: // 动态添加选项 $("#InfoInCardCheck").append(`<label class="layui-form-label">请选择:</label> <input lay-skin="primary" type=...
  • layui官方文档中给出了数据表格复选框全选字段,如下,但是部分选中没有配置项。 部分选中方法: 利用异步数据接口参数: 实现代码: layui.table.render({ id: "gridid", elem: '#grid', url: url, where...
  • layui数据表格复选框回显

    千次阅读 2020-01-08 17:25:35
    必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true 上面这段话描述不清楚,他意思是当我们想默认全选的时候就在列上添加这个属性. 其实这个属性是可以在每一行数据上面单独添加...
  • 获取选中行数据获取选中数目验证是否全选提交选择ID运动名运动时长运动类型var msg="";var idlist="";...//监听表格复选框选择table.on('checkbox(demo)', function(obj){});var $ = layui.$, active = {get...
  • Layui数据表格复选框取消选中

    万次阅读 2019-08-15 09:25:00
    需要实现功能:左侧选中或取消时,右侧做出...主要出现问题:右侧取消时候,表格中相应行没有变为未选中,但全选的checkbox却变成了未选中 右侧显示 <div class="layui-card" id="vue_conten"> &l...
  • 项目需求,可以用复选框勾选项目进行提交,如下表IDID测试项标定参数标定值我们已经获取到了表中所有行数据,全选,部分选都可行,不用选复选框遍历方式去获取数据table.on('checkbox(test3)', function(obj){...
  • layui-form"&gt; &lt;table class="layui-table" lay-even="" lay-skin="row"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th style="tex
  • Selects-v4.js 基于Layui的多选解决方案:https://hnzzmsf.github.io/example/example_v4.html jQuery下拉多选插件 下拉框复选 包括全选:http://www.freejs.net/article_biaodan_757.html ...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

layui的复选框全选