点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态
给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find。
find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了。然后判断状态,改变状态。
$("tr").click(function(e){
var check = $(this).find("input[type='checkbox']");
if(check){
var flag = check[0].checked;
if(flag){
check[0].checked = false;
}else{
check[0].checked = true;
}
}
});
到这还没有结束,当点击checkbox的时候出现了问题。是因为点击checkbox的时候同时也点击了tr,所以checkbox的状态只是闪一下,没有改变。要解决这个问题使用下面代码就可以实现。给checkbox添加阻止冒泡事件,三行代码就搞定了。
$("input[type='checkbox']").click(function(e){
e.stopPropagation();
});
解决 jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态 除了转换成dom外还可以
$(".list-msg li").click(function(){
obj=$(this).find("input[type=checkbox]");
//alert(obj.is(":checked"))
if(obj.is(":checked")){
obj.prop("checked", false)
}else{
obj.prop("checked", true)
}
})
jquery 1.6以上版本 设置boolean值的属性时要用prop。而不是attr
点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态的更多相关文章
- 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)
如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...
- js实现冒泡事件,点击ul给子标签添加相同事件和阻止冒泡事件
$('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){ var e=e||windo ...
- jquery鼠标点击窗口或浮动层以外关闭层【阻止冒泡事件】
$(".up-list a.th1").click(function(){ $(this).next("ul#up-list-ul").show(); }); ...
- js 冒泡事件 点击任意地方隐藏元素
$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...
- jQuery操作checkbox选择
1.checkbox list选择 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 点击tableViewCell,调用打电话的功能
对于点击tableViewCell,调用打电话的功能,按照一般的方法,使用Appdelegate的OpenUrl的方法,使用前先使用UIAlertView展示,让用户选择是否拨打,但是发现了个简单的方 ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- input选中 和 select点击下拉选择获取选中选项的值
1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...
- Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项
页面跳转反显(点击项,点击table滚动的位置,搜索条件,分页回显) 点击table tr项后,页面跳转到下级页面,返回回显搜索条件.当前页码.并将点击项select选中.滚动条也被记录回显跳转时滚动 ...
随机推荐
- Exploring refit, an automatic type-safe REST library for .NET Standard
自动类型安全的.NET标准REST库refit 在SCOTT HANSELMAN 博客上看到一个好东西<Exploring refit, an automatic type-safe RES ...
- Jexus 5.8.2
Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持 Jexus 是一款运行于 Linux 平台,以支持 ASP.NET.PHP 为特色的集高安全性和高性能为一体的 ...
- nginx的配置文件server_name的意义 location意义
配置不同的域名 不同域名都可以有首地址 location 同一域名下 分发到不同的路径 或者项目
- Webstorm 激活
注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.iteblog.com/key.php 点击:Acti ...
- win10 vm 11 桥接模式配置
1 保证你Vmware里面的虚拟机是关机状态 2 在本地连接 属性中 卸载VM 桥接协议 3 管理员身份运行VM ,编辑>虚拟网络编辑器 删除所有网卡,并且重新配置网络适配器 4 配置完成后,选 ...
- [LoadRunner]录制启动时报“The JVM could not be started……”错误解决方案
在LR准备点击录制java over http协议时,程序报如下错误: 报错提示是设置的JVM值设置问题,导致不能启动. 解决方案一 点击F4快捷按钮,会弹出以下界面,在选中的位置选择对应的java路 ...
- Redis相关注意事项
本文介绍了五个使用Redis使用时的注意事项.如果你在使用或者考虑使用Redis,你可以学习一下下面的一些建议,避免遇到以下提到的问题. 一.配置相关注意事项 1.涉及到内存的单位注意添加 b 1k ...
- Spring.Net 能为我们做点什么
本文内容 概述 背景 模块 使用场景 入门应用 Spring.NET 相关项目 本文正式开始前,我以目前所能想到的.此时此刻能想到的,先简单说下,为什么会有像 Spring.Net 这样的东西.首先, ...
- AdonisJs(Node框架)学习总结
先列出作为前端开发人员必须知道的10个NodeJs框架 AdonisJs 一个服务端渲染的MVC框架,它是 Laravel (PHP框架)的一个 NodeJS 版本. 可以安装脚手架工具adonis ...
- 在Ubuntu12.04中搭建NFS的步骤
1.首先安装nfs-kernel-server apt-get install nfs-kernel-server 2.然后创建一个目录: mkdir -p /opt/share 并赋予权限777: ...