javascript复选框全选和取消全选

最新推荐文章于 2023-06-07 15:02:43 发布

原创最新推荐文章于 2023-06-07 15:02:43 发布 · 388 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JSP和JS实现网页表格数据的动态加载，包括通过JS代码将查询结果展示在JSP页面上，并实现表格中复选框的全选和取消全选功能。

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

原文代码

jsp页面：

<table>
 <thead>
     <tr>
        <th>序号<input type="checkbox" id="all"></th>
        <th>员工号</th>
        <th>用户名称</th>
    </tr>
</thead>
<tbody id="dataTableTbody">
   
</tbody>
</table>

js代码：

将查询的值展示到页面上

dataList += '<tr>';
dataList +='<td><input type="checkbox" lay-skin="primary" name="packageId" value="' + dataArray.id + '"></td>';
dataList +='<td>' + dataArray.pPackageName + '</td>';
dataList +='<td>' + dataArray.zxName+ '</td>';
dataList += '</tr>';
$('#dataTableTbody').html(dataList);

全选和取消全选

//全选按钮状态显示判断
 $(document).off('click', '#dataTableTbody input[type=checkbox]').on('click', '#dataTableTbody input[type=checkbox]', function() {
	var nocheckedList = $("#dataTableTbody").find('input:not(:checked)');
	if(nocheckedList.length == 0){
	    $("#all")[0].checked = true;
	 }else{
	    $("#all")[0].checked = false;
	 }
});
// 全选/取消
$("#all").click(function(){
	if($(this).is(':checked')){
	    $("#dataTableTbody").find('input').each(function(){
	    	$(this).prop("checked",true);
	    })
	 }else{
	    $("#dataTableTbody").find('input').each(function(){
	    	$(this).prop("checked",false);
	    })
	 }
});