精华内容
下载资源
问答
  • layui获取checkbox复选框
    2020-12-19 10:32:47

    html

    layui.form.checkbox 获取选中

    复选框

    开关关

    开关开

    立即提交

    js

    layui.use('form', function(){

    var form = layui.form,

    $ = layui.$;

    //各种基于事件的操作。

    form.on('submit(*)', function(data){

    //将页面全部复选框选中的值拼接到一个数组中

    var arr_box = [];

    $('input[type=checkbox]:checked').each(function() {

    arr_box.push($(this).val());

    });

    //数组

    console.log(arr_box);

    // ["董先生的csdn"]

    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。

    });

    });

    如果需要字符串的话,再将数组转为字符串

    console.log(arr_box.tostring());

    // dongsir,董先生,董先生的csdn

    如果需要自定义分割字符的字符串

    console.log(arr_box.join(","));

    // dongsir,董先生,董先生的csdn

    如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    更多相关内容
  • 今天小编就为大家分享一篇解决layui动态加载复选框无法选中的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui表格数据复选框回显设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui默认选中table的CheckBox复选框方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui复选框使用介绍

    2020-12-19 10:32:48
    layui复选框:效果图layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用...

    layui复选框:

    效果图

    layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样

    layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置

    html代码使用了jfinal的模板

    *#(i18n.get('所属校区'))

    #for(campus : campusList)

    #end

    layui代码$(function(){

    layui.use('form', function(){

    var form = layui.form;

    form.on("checkbox(allCheck)", function(data){

    console.log(data);

    console.log(data.elem.checked);

    if (data.elem.checked) {

    //动态设置全选按钮颜色,不可以这里设置,这里设置后,前端选然后不会有效果的,

    //猜测原因是,form.render("checkbox"); 导致的,设置后layui又渲染了,把我自己设置的颜色覆盖了。所以设置需要在渲染后再设置,就等于是用我的css覆盖了layui的css

    $(".campus").each(function(){

    $(this).prop('checked', true);

    });

    } else {

    $(".campus").each(function(){

    $(this).prop('checked', false);

    });

    }

    form.render("checkbox");

    //渲染后设置我的颜色

    allCheckbox();

    });

    //查看是否被全选了,全选了,全选按钮编辑的时候就是被选中中状态

    function initselect(){

    let allSelect = true;

    $(".campus").each(function(index, elem){

    //每个checkbox添加点击事件,如果点击了,使得所有的按钮中出现了不被选中的,那么全选按钮就不被选中

    if($(this).prop('checked') == false){

    allSelect = false;

    }

    });

    console.log("是否全选",allSelect)

    $("#qx").prop('checked',allSelect);

    form.render("checkbox");

    //记得把设置事件放到渲染事件后

    allCheckbox();

    }

    initselect();

    //校区点击事件,如果有校区没有被选中,那么全选按钮就不能够显示选中状态

    form.on("checkbox(campus)", function(data){

    let checked = data.elem.checked;

    initselect();

    });

    });

    //全选按钮和其他按钮的颜色不一样

    function allCheckbox(){

    qx1=$('#qx').next('div').children('span');

    if($('#qx').prop('checked')){

    //被选中就设置颜色

    qx1.css({

    'background-color':'#e4393c'

    })

    }

    }

    //初始化设置全选按钮的颜色,

    allCheckbox();
    })

    css

    .layui-form-checkbox span {

    width:154px

    }

    .layui-unselect.layui-form-checkbox{

    margin-bottom:5px;

    }

    .layui-form-checkbox span{

    color:#4C5277;

    }

    .layui-form-checked span{

    color:#fff;

    }

    /*.layui-form-checked span{

    background-color:#b31717!important;

    }*/

    更多layui知识请关注layui使用教程栏目。

    展开全文
  • <div class=layui-btn-group xss=removed>  <button class=layui-btn id=hqsj data-type=getCheckData>获取选中行数据</button>  <button class=layui-btn data-type=getCheckLength>获取选中...
  • href="../../../static/js/css/layui.css" rel="external nofollow" media="all"> <link rel="stylesheet" type="text/css" href="../../../static/css/index-gb.css" rel="external nofoll
  • 一行代码搞定layui数据表格的表头checkbox复选框隐藏问题。
  • layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="background-color: white;"> <div class="layui-form">...

    layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下:

        <body style="background-color: white;">
        <div class="layui-form">
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">原始复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                    <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
                    <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
                </div>
            </div>
        </div></body>
    
    #上面样式中有添加layui-form  所以需要引入 layui中form,才可正确显示
    
        <script>
            layui.use('form', function () {
    
                var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
    
                form.render();
    
            });
        </script>

     

    转载于:https://www.cnblogs.com/weilaibuxiangshuo/p/11448561.html

    展开全文
  • 基于layui模块制作的一款带复选框的tree结构树拓展包(带复选框
  • layui复选框

    2020-12-29 01:43:20
    标签:效果图layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用了...

    标签:

    效果图

    layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样

    layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置

    html代码使用了jfinal的模板

    *#(i18n.get('所属校区'))

    #for(campus : campusList)

    #end

    layui代码

    $(function(){

    layui.use('form', function(){

    var form = layui.form;

    form.on("checkbox(allCheck)", function(data){

    console.log(data);

    console.log(data.elem.checked);

    if (data.elem.checked) {

    //动态设置全选按钮颜色,不可以这里设置,这里设置后,前端选然后不会有效果的,

    //猜测原因是,form.render("checkbox"); 导致的,设置后layui又渲染了,把我自己设置的颜色覆盖了。所以设置需要在渲染后再设置,就等于是用我的css覆盖了layui的css

    $(".campus").each(function(){

    $(this).prop('checked', true);

    });

    } else {

    $(".campus").each(function(){

    $(this).prop('checked', false);

    });

    }

    form.render("checkbox");

    //渲染后设置我的颜色

    allCheckbox();

    });

    //查看是否被全选了,全选了,全选按钮编辑的时候就是被选中中状态

    function initselect(){

    let allSelect = true;

    $(".campus").each(function(index, elem){

    //每个checkbox添加点击事件,如果点击了,使得所有的按钮中出现了不被选中的,那么全选按钮就不被选中

    if($(this).prop('checked') == false){

    allSelect = false;

    }

    });

    console.log("是否全选",allSelect)

    $("#qx").prop('checked',allSelect);

    form.render("checkbox");

    //记得把设置事件放到渲染事件后

    allCheckbox();

    }

    initselect();

    //校区点击事件,如果有校区没有被选中,那么全选按钮就不能够显示选中状态

    form.on("checkbox(campus)", function(data){

    let checked = data.elem.checked;

    initselect();

    });

    });

    //全选按钮和其他按钮的颜色不一样

    function allCheckbox(){

    qx1=$('#qx').next('div').children('span');

    if($('#qx').prop('checked')){

    //被选中就设置颜色

    qx1.css({

    'background-color':'#e4393c'

    })

    }

    }

    //初始化设置全选按钮的颜色,

    allCheckbox();

    })

    css

    .layui-form-checkbox span {

    width:154px

    }

    .layui-unselect.layui-form-checkbox{

    margin-bottom:5px;

    }

    .layui-form-checkbox span{

    color:#4C5277;

    }

    .layui-form-checked span{

    color:#fff;

    }

    /*.layui-form-checked span{

    background-color:#b31717!important;

    }*/

    标签:

    来源: https://www.cnblogs.com/renjianjun/p/9989931.html

    展开全文
  • 当点击表头的全选按钮时,所有的复选框都被选中,我的天,,,那就换方案呗 方案二:当isCheckBox为0时,直接将该数据前的复选框去掉。 相同的地方,直接用空的span标签替换复选框 for(var k in list){ if(list[k]...
  • 项目需求,可以用复选框勾选项目进行提交,如下表 <table class=layui-table lay-data={url: lay-filter=test3> <th lay-data={type:>ID <th lay-data={field:>ID 测试项 <th lay-data={field:'t2', ...
  • layui怎么设置复选框

    千次阅读 2020-12-29 01:43:22
    html里,我们写上对应的复选框控件,就是平时常用的checkbox。但这里需要注意的是checkbox要加一个title值,而且控件要放在样式为layui-form的form表单里。在页面加载完函数ready里,(这里使用jquery的),我们要引入...
  • layui table的复选框 重载后增加回显找到未压缩的table.js增加配置缓存所选中的数据回显数据获取找到未压缩的table.js我们需要修改table.js文件,但官网下载的是压缩后的文件layui官网源码地址:...
  • //添加复选框选中样式 $('tr[data-index=' + i + '] input[type="checkbox"]').next().addClass("layui-form-checked"); //设置复选框的选择值 $('tr[data-index=' + i + '] input[type="checkbox"]').prop('checked...
  • 今天小编就为大家分享一篇解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui从入门到使用layui复选框checkbox

    千次阅读 2021-05-05 10:14:23
    1, Layui是什么 layui是一套开源的web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,非常适合网页界面的快速开发 2, 如何使用layui? 首先在百度直接搜索“layui官网”;...
  • layui复选框怎么设置只能单选?

    千次阅读 2020-07-26 21:25:21
    //复选框监听事件(只能单选) form.on('checkbox',function(data){ var oldState = data.elem.checked // 记录状态 var elName = data.elem.name || '' // 取当前名称 $("input[name='"+elName+"']").prop(...
  • layui动态生成复选框并向后端传递选中复选框的值
  • 复选框点击了之后,样式效果是选中了,但是每当获取表单提交的时候,它的checked状态总是false 通过以下代码解决了,监听复选框点击操作,通过以下代码... //监听复选框 form.on('checkbox', function(data){ if(da
  • Layui 动态在table里添加多个复选框

    千次阅读 2020-03-05 17:09:54
    在一个table里动态显示多个复选框 数据: { “count”: 1000, “code”: 0, “msg”: “”, “data”: [ { “menuCode”: “customer”, “menuName”: “客户列表”, “permissions”: [ { “permissionId”: “1...
  • 目前layui是没有给复选框设置禁用的样式的:比如说这种: &lt;input type="checkbox" class="layui-input layui-disabled layui-unselect" name="like[andit_app]" title="...
  • ajax-form提交 前端代码: <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="_meta :: header">...添加</title> </head> <link rel="style...
  • 详细参考该篇文章,点击链接可以直接跳转http://www.shagua.wiki/project/3?p=94

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,186
精华内容 474
关键字:

layui添加复选框