jQuery实现表格行点击选中复选框

最新推荐文章于 2020-06-02 13:51:46 发布

ethneyli

最新推荐文章于 2020-06-02 13:51:46 发布

阅读量4.5k

点赞数

分类专栏： web开发文章标签： jquery js checkbox

本文链接：https://blog.csdn.net/xzlizha/article/details/40373727

版权

web开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何利用jQuery实现表格行被点击时，对应的复选框自动选中的功能。通过示例代码展示了在jsp页面中操作表格元素和复选框的技巧，帮助开发者提升用户交互体验。

摘要由CSDN通过智能技术生成

js代码，页面初始化执行：

$(".list tr").each(function(){  
		    $(this).children().click(function(e){  
		        $(e.target).parent("tr.item").each(function(){
		        	if($(this).find(":checkbox").is(":checked")){
		        		$(this).find(":checkbox").attr("checked",false);
		        	}else{
		        		$(this).find(":checkbox").attr("checked",true);
		        	}
		        });
		    });  
		});

对应表格的jsp代码：

<table class="list" >
							<tbody>
							<tr >
								<th>序号</th>
								<th>姓名</th>
								<th>性别</th>
								<th>地址</th>
							</tr>
							<c:forEach items= "${finder.mapitems}" var="bean" varStatus="st">
								<tr class="item">
								    <td><input type="checkbox" name="vipId" id="vipId_${st.count}" value="${bean.vipId }"/>${st.count}</td>
								    <td><label for="vipId_${st.count}">${bean.custName}</label> </td>
								    <td><label for="vipId_${st.count}">${bean.sexId}</label> </td>
								    <td><label for="vipId_${st.count}">${bean.custAddr}</label> </td>    
								    
								</tr>
							</c:forEach>
							</tbody>
						</table>