layui通过点击事件取消复选框勾中状态没用(女孩子)

提问 已结
13 274
黎耀辉
黎耀辉 2018-12-4
悬赏:20飞吻
版本:layui 浏览器:

获取到了复选框控件 就是取消不了勾中状态
回帖
  • IDyun
    2018-12-5
    @IDyun 第一张图错了
    一、单击行切换 复选框
    0 回复
  • 是自己写的 点击事件还是 layui自带的事件
    0 回复
  • IDyun
    2018-12-4
    http://www.runoob.com/jquery/html-prop.html
    自带的属性,请使用jQuery prop() 方法。
    自定义的属性,请使用attr()方法
    $(check).prop('checked',false);
    form.render(); //单选复选下拉框渲染
    https://www.layui.com/doc/modules/form.html#render


    你这是要做什么功能?
    0 回复
  • 黎耀辉
    2018-12-4
    @一只菜鸡 我自己写的点击事件 效果是点击div 然后去取到这个复选框控件 把它变成取消勾选的状态
    0 回复
  • 黎耀辉
    2018-12-4
    @IDyun 我自己写的点击事件 效果是点击div 然后去取到这个复选框控件 把它变成取消勾选的状态 我刚刚用了prop还是不行
    0 回复
  • IDyun
    2018-12-4
    //你可以先使用prop方法,然后F12看下复选框 checked 是否 为false
    然后再更新渲染复选框,form.render(); //复选框是经过美化的,如果不加上这句就不同步原始复选框的状态。
    0 回复
  • 黎耀辉
    2018-12-4
    @IDyun 我用了form.render() 我写在一个方法里面了 就是那个load()方法 然后在最下面调用了 就是我点击div 复选框状态是勾选的 但是输出的 checked状态是false 我不知道为什么
    0 回复
  • [给力] [给力]
    0 回复
  • 请用prop() 不要用attr() 设置状态后记得使用 form.render()重新渲染
    0 回复
  • IDyun
    2018-12-5
    一、单击行切换 复选框

    二、点击按钮切换user-0所在行的复选框

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1542630986934" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>

    <table class="layui-hide" id="demo" lay-filter="test"></table>
    <button class="layui-btn layui-btn-primary" id="userChe">切换user-0行选择状态</button>
    <script src="//res.layui.com/layui/dist/layui.js?t=1542630986934"></script>
    <script>
    layui.config({
    version: '1542630986934' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
    var laydate = layui.laydate //日期
    ,laypage = layui.laypage //分页
    ,$= layui.$
    ,table = layui.table //表格
    ,form= layui.form//



    //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页

    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}

    ]]
    });

    //监听行单击事件
    table.on('row(test)', function(obj){
    var che =obj.tr.find("input[name='layTableCheckbox']")
    console.log(che );
    che.prop("checked",!che.prop('checked'))
    form.render(); //单选复选下拉框渲染
    });

    $('#userChe').click(function(){
    var username='user-0';
    $('#demo').next().find('.layui-table-body tr').each(function(index,item){
    var text=$(item).find('td[data-field="username"]').text();
    if(text==username){
    var index=$(item).data('index');
    var che = $('#demo').next().find('.layui-table-body tr[data-index="'+index+'"] input[name="layTableCheckbox"]')
    che.prop("checked",!che.prop('checked'))
    form.render(); //单选复选下拉框渲染
    return false;
    }
    });
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • 告诉你,在这里说自己是女孩子没用,我们都是靠技术吃饭的
    0 回复
  • 不知道是这意思不
    0 回复
  • fd
    2018-12-6
    女孩子这三个字吸引了众多男青年
    0 回复