需求描述:单击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. 前端与后端的数据交互(jquery ajax+python flask)

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  2. asp.net core处理中文的指南

    参考资料:https://docs.microsoft.com/en-us/aspnet/core/security/cross-site-scripting Customizing the Enco ...

  3. git 新建分支

    创建分支   git checkout -b 分支名 推送到远程   git push origin 分支名

  4. IDEA 启动项目前的配置--或过程遇到的问题

    配置JDK 配置Maven路径和 仓库路径:文件->设置 配置Tomcat Server  文件-->设置 运行时 选择一个tomcat服务器 ==拓展: 本人台式机 的2016版本,因汉 ...

  5. 2018牛客暑期ACM多校训练营第二场(有坑未填)

    第二场终于等来学弟 开始(被队友带飞)的开心(被虐)多校之旅 A   run A题是一个递推(dp?)+前缀和 因为看数据量比较大 就直接上前缀和了 一个比较简单的递推 没有太多难点 签到题 需要注意 ...

  6. zookeeper安装教程

    zookeeper  一.单机安装 1.1 下载 1.2 安装 1.3 配置 1.4 启动和停止 二.伪集群模式 2.1 zookeeper1配置 2.2 zookeeper2配置 2.3 zooke ...

  7. WinRAR代码执行漏洞CVE-2018-20250

    0x01 分析思路 利用https://github.com/googleprojectzero/winafl 漏洞分析框架模糊测试WinRAR. 几个存档格式的崩溃,例如RAR,LZH和ACE,这些 ...

  8. CAN总线芯片SN65HVD230QD介绍

    CAN总线硬件电路如上,采用芯片为SN65HVD230QD,从TI获得的芯片手册,可知该芯片参数为: 3.3V供电 低电流为370uA典型值

  9. RefineDet网络简介(转载)

    转载链接:https://blog.csdn.net/u014380165/article/details/79502308 思想:框架建立在FPN上,只不过在提取特征层(down-top)的时候就加 ...

  10. jenkins服务器上安装配置Android SDK

    1.下载Android SDK http://tools.android-studio.org/index.php/sdk/   我下载的是:android-sdk_r24.4.1-linux.tgz ...