单击列表行前边的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 ...
随机推荐
- struts2简单入门
框架是什么,框架有什么作用 框架 实现部分功能的代码. 作用 控制请求和响应. 相对于WEB项目的执行流程 struts2项目搭建流程 配置web.xml 配置前端控制器[核心控制器] ---一个fi ...
- 2017-2018-2 165X 『Java程序设计』课程 团队项目备选题目
2017-2018-2 165X 『Java程序设计』课程 团队项目备选题目 结合本课程时间安排,以及同学们的专业和课程内容,制定了以下六个题目供各小组选择.如有其他项目方案设想,可自行与老师沟通.老 ...
- C - CodeCoder vs TopForces Gym - 101142C (连通块+思维)
题目链接: C - CodeCoder vs TopForces Gym - 101142C 题目大意:给你n个人的信息,每一个人的信息包括两个.t1和t2.A>B的前提是A的t1和t2至少有一 ...
- Flask里面的cookie的基本操作
#cookie相关操作,依赖于make_response #调用cookie依赖request模块 from flask import Flask,make_response,request #建立对 ...
- js 一个对象的属性名是一个变量怎么处理?
1.这种方法的属性(setAttrName)可以是一个变量. var obj = {}; obj[setAttrName] = 'Tom' 2.这样就可以动态的给js对象添加变量属性. var obj ...
- 虚拟机克隆后无法上网的解决(Centos7为例)
说明:我的虚拟机之前配置的为静态ip 解决步骤: (1)更换mac地址 (2)删除 etc/udev/rules.d/70-persistent-net.rules 删除后重启机器,系统会自动生成一个 ...
- Spring学习1:Spring基本特性
http://longliqiang88.github.io/2015/08/14/Spring%E5%AD%A6%E4%B9%A01%EF%BC%9ASpring%E5%9F%BA%E6%9C%AC ...
- 刷题之路第三题--Longest Substring Without Repeating Characters
问题简介:求给定字符串中最长的字符不重复的字符串的长度 问题详解: 给定一个字符串,寻找给定字符串中包含的最长的字符不重复的字符串的长度 注:答案必须是子字符串,不是子序列 是连续的字符不重复的字符串 ...
- 关于Oracle数据库后台进程
为了最大限度地提高性能并适应许多用户,多进程Oracle数据库系统使用后台进程.后台进程将合并功能,否则这些功能将由运行于每个用户进程的多个数据库程序处理.后台进程异步执行I / O并监视其他Orac ...
- linux下 gdb+coredump 调试偶发crash的程序
1. 打开 core dump 查看是否打开 ulimit -c 如果输出0, 说明没有打开. 方法一:使用命令 ulimit -c unlimited 可以打开,但是只对当前终端有效, 方法二: 配 ...