checkbox一键全选/取消

最新推荐文章于 2026-05-04 16:03:43 发布

原创最新推荐文章于 2026-05-04 16:03:43 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Web应用专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用jQuery实现表格中全选与取消全选功能的方法。通过简单的JavaScript代码片段，当用户勾选顶部的复选框时，表格内的所有复选框将被同时选中或取消选中，并提供了对应的数据处理函数调用。

直接上代码

$(document).ready(function () {
    $('#orChecked').change(function(){
		if($(this).is(':checked')){
			$('#box').find(':checkbox').prop('checked',true);
		}else{
            $('#box').find(':checkbox').prop('checked',false);   
		}
        //数据处理
        addCodeAll($(this).is(':checked'));
	})
 });

<table id="contentTable"
	   class="table table-striped table-vmiddle bootgrid-table">
	<thead>
	<tr>
		<th class="col-xs-1">
			<label class="checkbox checkbox-inline m-r-20" title="全选/取消全选">
				<input type="checkbox" id="orChecked"/>
				<i class="input-helper"></i>
			</label>
			序号
		</th>
	</tr>

	</thead>
	<tbody id="box">
	<c:forEach items="${pageList }" var="item" varStatus="status">
		<tr>
			<td>
				<label class="checkbox checkbox-inline m-r-20">
					<input type="checkbox"/>
					<i class="input-helper"></i>
				</label>
					${(page.pageNo-1)*page.pageSize + status.count }
			</td>
		</tr>
	</c:forEach>
	</tbody>
</table>