实现前端table中checkbox全选功能，并将选中的数据发送到后端

最新推荐文章于 2023-08-16 09:11:41 发布

转载

最新推荐文章于 2023-08-16 09:11:41 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rolly-yan/p/6920511.html

文章标签：

#后端 #前端 #java #ViewUI

本文介绍如何在前端表格中实现全选checkbox功能，点击全选按钮可选中或取消所有行，提交时将选中数据发送至后端。通过JavaScript DOM操作实现全选功能，并展示获取选中行特定列信息的代码示例。

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

一、需求

1. 点击这个checkbox按钮，会选中下面所用checkbox，当然在选中的情况下点击，会将下面所有选中的checkbox取消；

2. 当下面使用submit的提交按钮时，会将所有checkbox选中的数据提交给后端；

二、实现

1、实现全选checkbox功能

技术分析：其实这里可以使用js活着jquery两种方式，我暂时使用的是js中的dom实现的，具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>实现checkbox权限功能并将选中行的数据发送到后端</title>
</head>

<body>
    <script type="text/javascript">
    // 选择状态，开始默认的是没有选中
     var selectState = false;
      // 全选或者全取消
     function AllCheck(thisform){
        for (var i = 0; i < thisform.elements.length; i++){
            // 提取控件  
            var checkbox = thisform.elements[i];
            // 修改每个checkbox的状态
            checkbox.checked = !selectState;
        }
        selectState = !selectState;
      }
    </script>



     <form>
         <table border="1px" id="test">
             <thead>
                 <tr>
                     <th>id</th>
                     <th>name</th>
                     <th>age</th>
                     <th>isselected<input