JavaScript控制tr点击事件及checkbox单选

最新推荐文章于 2025-02-18 00:32:21 发布

phs999

最新推荐文章于 2025-02-18 00:32:21 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript Web 文章标签： JavaScript table

本文链接：https://blog.youkuaiyun.com/phs999/article/details/87288655

版权

Web 同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

本文介绍如何使用JavaScript处理table中的tr点击事件，实现单选功能。通过初始化元素，设置checked属性，监听点击事件，当点击元素checked为true则取消选中，为false则清空所有选中并选中当前。这样可以确保每次点击只会有一个行的选中框处于选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不管是使用checkbox实现单选，还是使用图片替换的方式实现单选效果，思路一致：
（1）初始化各个元素，checked置为false。
（2）对于被点击的元素，若checked为true,则把当前元素的checked置为false。（被选中的元素再次被点击，应当取消选中效果的情况）
（3）对于被点击的元素，若checked为false，则把所有元素都重置为false，然后把当前被点击的元素的checked置为true。

true的意思是checkbox 的 checked 属性值，或者有选中效果的图片。
false的意思是checkbox 的 checked 属性值，或者没有选中效果的图片。

第一列为选择框，点击当前行任意位置，实现当前行选择框选中，其他选中框不被选中。

function mainClick(){
	$("#tablehz tr").each(function(){
			var currentEle = $(this);
			currentEle.click(function(){
				$("#tablehz").find(":checkbox").not(currentEle).each(function(){
					$(this).attr('checked',false);
				});
				currentEle.find(":checkbox").attr('checked',true);
			});
	});
}

function mainClick(){
	$("#tablehz tr").each(function(){
		var currentEle = $(this);
		$("#tablehz").find("img").each(function(){
			$(this).attr('checked',false);//checked是自定义的属性
			$(this).attr('src','../../../../public/themes/default/images/checked1.png');
			
		});
		currentEle.click(function(){
			if(currentEle.attr('checked')){
				currentEle.find("img").attr('src','../../../../public/themes/default/images/checked1.png');
				currentEle.attr('checked',false);
			}else{
				$("#tablehz").find("img").each(function(){
					$(this).attr('checked',false);
					$(this).attr('src','../../../../public/themes/default/images/checked1.png');
					
				});
				currentEle.find("img").attr('src','../../../../public/themes/default/images/checked2.png');
				currentEle.attr('checked',true);
			}
			
		});
		
	});
}