需求描述:单击datatabl的一行数据,前边的checkbox被勾选上,再次点击,选中取消,第一次碰到这种需求,不过呢也很实用,简单记录一下

代码:

//html代码
<tr class="trs" >
  <td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" name="selectedIds" />
</label>
</td>
<td></td>
<td></td>
<td></td>
</tr> //js代码
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
//单击行选中checkbox 通过class选择器来控制
$('.trs').on('click' , function(){
var check = $(this).find("input[type='checkbox']");
if ($(check).is(':checked')) {
$(check).prop('checked', false);
} else {
$(check).prop('checked', true);
}
});
</script>
//js代码 另一种$('.trs').on('click' , function(){
var check = $(this).find("input[type='checkbox']");
if ($(check).is(':checked')) {
$(check).attr('checked',false).siblings().attr('checked',false);
} else {
$(check).prop('checked', true);
$('input[type=checkbox]').not($(check)).removeAttr('checked');
}
});

总结:关键就是一个class选择器,通过单击行<tr>来执行函数控制选中与否

单击列表行前边的checkbox被选中,再单击,取消选中的更多相关文章

  1. 单个单选框radio 点击选中点击取消选中

    $("input:radio").click(function(){ var domName = $(this).attr('name');//获取当前单选框控件name 属性值 ...

  2. vue中两行代码实现全选及子选项全部选中,则全选按钮选中,反之有一个没选中,就取消选中全选按钮

    every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测. 如果所有元素都满足条件,则返回 true. 逻辑 ...

  3. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  4. 点击checkbox全选,其它被选中,再点击取消

    <input type="checkbox" value="" id="checkall" name="" siz ...

  5. radio(单选框)反复选中与取消选中

    做个记录,以便需要拿取 <script type="text/javascript"> $(function(){ 第一种 $('input:radio').click ...

  6. jQuery checkbox全选 和全部取消

    1.chkAll选中,全部chk选中  ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...

  7. jquery 单击table行事件和radio的选中事件冲突

    原文地址:http://zhidao.baidu.com/link?url=HER7lu4jqejWUhWQO2nq6LZ6tf7vyhPZRADSL-xaBQSF4P4yftD9vg08Ss8HF- ...

  8. 《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结

    <form> <input type="radio" name="gender" id="man" value=" ...

  9. ListView+CheckBox实现全选 单击效果

    在网上也找了一些案例,但都是用Map来实现的.我的是把对象绑定到当前控件上.代码稍微简洁. main布局文件:main.xml <?xml version="1.0" enc ...

随机推荐

  1. Python常用模块之time模块

    python中的time和datetime模块是时间方面的模块 time模块中时间表现的格式主要有三种: 1.timestamp:时间戳,时间戳表示的是从1970年1月1日00:00:00开始按秒计算 ...

  2. Python常用模块之json模块

    常用模块: 一个Python文件就是一个模块 import xxx 1. 标准模块,Python自带的,如time/random 2. 第三方模块,如连接mysql,需要安装 3. 自己写的Pytho ...

  3. 360doc个人图书馆解决复制问题

    360doc个人图书馆在复制的时候会弹出如下页面: 对于我们程序员来说很容易就可以推断,可能是在复制的时候写了事件什么的. 估计是这些个: document.oncopy或者document.body ...

  4. Kotlin中三元运算符

    int a = 10;int b = 11;int c = a > b ? a : b; 到了 kotlin中 val a = 10val b = 11val c = if (a > b) ...

  5. Redis随笔

    dump.rdb:快照文件 删除这个文件 rm -f dump.rdb 第一步:创建6个redis实例,端口号从7001~7006 第二步:修改redis的配置文件 1.修改端口号 修改redis.c ...

  6. 【Math for ML】线性代数-单射,满射,双射,同构,同态,仿射

    I. 映射(Mapping) 1. 单射(Injective) 函数f 是单射当且仅当若f(x) = f(y) 则 x = y. 例子: f(x) = x+5 从实数集\(R\)到\(R\)是个单射函 ...

  7. openstack Q版部署-----环境搭建(1)

    浏览器建议全程使用火狐或者谷歌,不然VNC可能会有问题 一.环境准备 系统:centos7.2 x86_64 controller 2c+8g+40g 10.1.80.110 可以nat上网 comp ...

  8. 绕过PALOALTO TRAPS EDR解决方案

    0x1 技术点 PaloAlto Traps(EDR解决方案)基于行为封锁和标记许多黑客工具. 0x2 绕过方法 最简单的解决方案就是禁用内置实用程序,即; Cytool.Cytool是一个集成命令行 ...

  9. 算法:60.第k个排列

    解答参考:https://blog.csdn.net/lqcsp/article/details/23322951 题目链接:https://leetcode-cn.com/problems/perm ...

  10. xpath 中 [<Element a at 3985984dj343>]

    在写爬虫用xpath抓取数据的时候出现了这个问题,列表中都是很多个 < element > 首先这不是报错,也不是你的xpath语法有错. 将这个数据列表循环,循环出的item就是你想要的 ...