//点击选中(单选)
//单击行勾选checkbox事件
    $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
var index = $(this).attr('data-index');
var tableBox = $(this).parents('.layui-table-box');
//存在固定列
if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
} else {
tableDiv = tableBox.find(".layui-table-body.layui-table-main");
}
//获取已选中列并取消选中
var trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
for(var i = 0;i<trs.length;i++){
var ind = $(trs[i]).attr("data-index");
if(ind!=index){
var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
if (checkCell.length>0) {
checkCell.click();
}
}
}
//选中单击行
var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
if (checkCell.length > 0) {
checkCell.click();
}
});
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
e.stopPropagation();
});
//点击选中(多选)
//单击行勾选checkbox事件
$(document)
.on(
"click",
".layui-table-body table.layui-table tbody tr",
function() {
var obj = event ? event.target : event.srcElement;
var tag = obj.tagName;
var index = $(this).attr('data-index');
var tableBox = $(this).parents(".layui-table-box"); //存在固定列
if (tableBox
.find('.layui-table-fixed.layui-table-fixed-l').length > 0) {
tableDiv = tableBox
.find('.layui-table-fixed.layui-table-fixed-l');
} else {
tableDiv = tableBox
.find('.layui-table-body.layui-table-main');
}
var checkCell = tableDiv
.find('tr[data-index=' + index + ']')
.find(
"td div.laytable-cell-checkbox div.layui-form-checkbox I");
if (checkCell.length > 0) {
checkCell.click();
}
}); $(document).on("click",
"td div.laytable-cell-checkbox div.layui-form-checkbox",
function(e) {
e.stopPropagation();
})

layui 数据表格复选框实现单选功能的更多相关文章

  1. DataGridView复选框实现单选功能(二)

    双击DataGridView进入事件 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventA ...

  2. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  3. layui获取checkbox复选框值

    获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  5. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  6. 如何让checkbox复选框只能单选

    function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...

  7. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  8. Jquery学习笔记:操作form表单元素之二(复选框和单选框)

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  9. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

随机推荐

  1. 论文笔记:Learning Region Features for Object Detection

    中心思想 继Relation Network实现可学习的nms之后,MSRA的大佬们觉得目标检测器依然不够fully learnable,这篇文章类似之前的Deformable ROI Pooling ...

  2. (转)I2C 上拉大小

    中断,GPIO,I2C等一般都是OC或者OD门,芯片内部无上拉电阻时,则外部必须加上拉电阻才能输出高电平.一般I/O端的驱动能力在2-4mA量级,OC或者OD门的导通电压为0.4V左右,手机中加在上拉 ...

  3. Linux系统组成和获取命令帮助3

    命令的语法通用格式:        # COMMAND OPTIONS ARGUMENTS        COMMAND:            发起一个命令:请求内核将某个二进制程序运行为一个进程  ...

  4. C#微信公众平台账号开发真正给初学者的文章

    微信越来越受到大众人群的喜爱,但是对于开发人员来说刚接触肯能还是一头雾水的,比如像我,看了三四天文档感觉要吐,但是程序还是要写知识还是要学.发现了一个比较适合初学者的文章送给大家,废话到此:(转贴吧) ...

  5. 【icpc2019网络赛南昌站】Yukino With Subinterval

    傻b错误调一天系列 原题: 大意:给你一个数列a,字词两种操作: 1.把c[l]改成r 2.询问在区间[l,r]中,有多少个极大子区间满足子区间里的数全部一样,且在[x,y]范围内 (对于满足条件的区 ...

  6. 关于上部盒子里有图片下面盒子magin-top负值的层级问题

    .box{ width: 800px; box-sizing: border-box; margin: 50px auto 0; background: pink; } .imgBox{ width: ...

  7. Educational Codeforces Round 26 [ D. Round Subset ] [ E. Vasya's Function ] [ F. Prefix Sums ]

    PROBLEM D - Round Subset 题 OvO http://codeforces.com/contest/837/problem/D 837D 解 DP, dp[i][j]代表已经选择 ...

  8. File上次文件找不到文件相对绝对路径

    我的问题是因为文件的相对绝对路径上面有中午字符,把上面的中午字符全改为英文或者数字加特殊字符形式都可以

  9. 【Python之路】特别篇--Django生产环境部署

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中H ...

  10. Confluence 6.15 博客页面(Blog Posts)宏参数

    参数是让你可以用来控制宏的格式和输出的选项.在 Confluence 存储格式或者 Wiki 标记(wikimarkup)中使用的参数名与在宏浏览器中使用的标签名是不同的,在下面我们将会用括号列出  ...