单击列表行前边的checkbox被选中,再单击,取消选中
需求描述:单击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被选中,再单击,取消选中的更多相关文章
- 单个单选框radio 点击选中点击取消选中
$("input:radio").click(function(){ var domName = $(this).attr('name');//获取当前单选框控件name 属性值 ...
- vue中两行代码实现全选及子选项全部选中,则全选按钮选中,反之有一个没选中,就取消选中全选按钮
every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测. 如果所有元素都满足条件,则返回 true. 逻辑 ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- 点击checkbox全选,其它被选中,再点击取消
<input type="checkbox" value="" id="checkall" name="" siz ...
- radio(单选框)反复选中与取消选中
做个记录,以便需要拿取 <script type="text/javascript"> $(function(){ 第一种 $('input:radio').click ...
- jQuery checkbox全选 和全部取消
1.chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...
- jquery 单击table行事件和radio的选中事件冲突
原文地址:http://zhidao.baidu.com/link?url=HER7lu4jqejWUhWQO2nq6LZ6tf7vyhPZRADSL-xaBQSF4P4yftD9vg08Ss8HF- ...
- 《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结
<form> <input type="radio" name="gender" id="man" value=" ...
- ListView+CheckBox实现全选 单击效果
在网上也找了一些案例,但都是用Map来实现的.我的是把对象绑定到当前控件上.代码稍微简洁. main布局文件:main.xml <?xml version="1.0" enc ...
随机推荐
- Windows下开启composer镜像服务来安装yii
网上关于使用composer的安装教程挺多的,但是作为新手的我,觉得好凌乱,不断尝试后,终于安装好了.最后总结出,用开启composer的镜像服务来安装yii是最好的啦,当然,归档文件的做法有利有弊就 ...
- 爬虫代理及ssl验证
IP代理:import requests url='https://weibo.com/' proxies={ 'http':'116.196.66.197:99999' } # 此处的proxies ...
- kafka为何需要High Available
一.为何需要replication kafka0.8以前的版本中,是没有Replication的,一旦某一个Broker宕机,则其上所有的partition数据都不可被消费,这与kafka数据持久性及 ...
- Linux 01 计算机系统硬件组成简介
PC服务器 1U = 4.445cm 企业1-2U比较多 互联网公司,品牌 DELL,HP, IBM. Dell品牌 2010年之前:1850,1950(1u),2850,2950(2u) 2010年 ...
- python基本数据结构栈stack和队列queue
1,栈,后进先出,多用于反转 Python里面实现栈,就是把list包装成一个类,再添加一些方法作为栈的基本操作. 栈的实现: class Stack(object): #初始化栈为空列表 def _ ...
- Ubuntu16.04安装最新版nodejs
原文链接:https://www.jianshu.com/p/2b24cd430a7d
- ps遇到的技术问题列表
1.ps矩形选框显示像素 CTRL+K 进入首选项设置就可以了. 2.ps显示辅助线 页面工具栏上的视图按钮,我们在列表上找到标尺,我们也是可以快捷键选择CtrI+R 3.如何将插入photoshop ...
- 【OpenGL】【计算机图形学原理】撸课本系列一
P13 简单二维图元的生成方法 #include <GL/glut.h> //用于表示openGL允许采用 glClear(GL_COLOR_BUFFER_BIT); //清除颜色缓存 g ...
- 如何操控DevExpress的 SpreadSheet 控件 并与 XAF 结合应用
DevExpress的XAF 框架通常使用 GridControl 控件来操作数据库表中的数据,但导入导出.非结构化数据的管理可以使用SpreadSheet 控件. SpreadSheet 控件模拟微 ...
- Tomcat 打开jmx
jmx 配置后可以通过windows java客户端自带的jconsole.exe配置登陆,直观的查看jvm的情况及系统的各项指标: 一.配置linux下tomcat的jmx 具体配置如下,如果生产环 ...