单击列表行前边的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 ...
随机推荐
- if 语句
if 判断条件的时候,如果是多个条件一起进行判断,那么就需要逻辑运算符 并且-----------and 或者-----------or 非(取反)----not if 条件1 and 条件2 ...
- ES6走一波 Proxy/Reflect
Proxy:像拦截器,对目标对象修改等进行拦截,是一种元编程(meta programming),即修改JS语言本身. //生成proxy实例,两个参数都是对象,targetObj是要拦截的目标对象, ...
- Eclipse安装lombok及常用注解
转自:https://blog.csdn.net/ZJDWHD/article/details/77795023 lombok的官方网址:http://projectlombok.org/ https ...
- python 07
1.文件操作: f=open(...) 是由操作系统打开文件,那么如果我们没有为open指定编码,那么打开文件的默认编码很明显是操作系统说了算了 操作系统会用自己的默认编码去打开文件,在windows ...
- Javascript入门(四)条件控制语句
一.条件控制语句 1. if <script type="text/javascript"> var num = 1 if( num == 3 ){ alert(&qu ...
- java--GC Root有哪些
GC管理的主要区域是Java堆,一般情况下只针对堆进行垃圾回收.方法区.JVM栈和Native栈不被GC所管理,因而选择这些非堆区的对象作为GC roots,被GC roots引用的对象不被GC回收. ...
- SpringBoot实现标准的OAuth服务提供商
⒈添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...
- 【运维】Dell R710如何开启VT服务
[前言]: 英特尔的硬件辅助虚拟化技术(Virtualization Technology,简称VT技术)是一种设计更简单.实施更高效和可靠的方法. 如果想要在 ...
- Python3学习笔记34-pymongo模块
pymongo模块是python操作mongo数据的第三方模块,记录一下自己常用到的简单用法. 首先需要连接数据库: MongoClient():该方法第一个参数是数据库所在地址,第二个参数是数据库所 ...
- MySQL--详细查询操作(单表记录查询、多表记录查询(连表查询)、子查询)
一.单表查询 1.完整的语法顺序(可以不写完整,其次顺序要对) (不分组,且当前表使用聚合函数: 当前表为一组,显示统计结果 ) select distinct [*,查询字段1,查询字段2,表达式, ...