首页 > 代码库 > 实现前端table中checkbox全选功能，并将选中的数据发送到后端

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

2024-09-28 02:14:39   242人阅读

一、需求

技术分享

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 type="checkbox" name="cbtest" onclick="AllCheck(this.form)"></th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
                     <td>1</td>
                     <td>zy</td>
                     <td>18</td>
                     <td><input type="checkbox" name="cbtest"></td>
                 </tr>
                 <tr>
                     <td>2</td>
                     <td>junjun</td>
                     <td>18</td>
                     <td><input type="checkbox" name="cbtest"></td>
                 </tr>
             </tbody>
         </table>
     </form>

</body>
</html>

 2、实现获取checkbox选中行的指定列的信息

<!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;
          }

          //通过dom判断该列的checkbox是否被选中，并获取该选中行的数据
          function sendDataTo(id){
              //获取该table中所有的input元素，是一个数组
            var inputs = document.getElementById(id).getElementsByTagName("input");
            var allData = new Array();
            var num = 0;
            for(var i = 0; i < inputs.length; i++){
                // 判断该input中是否为checkbox
                if(inputs[i].type == "checkbox" ){
                    //判断该checkbox是否被选中，如果被选中获取table行中的指定元素
                    if(inputs[i].checked){
                        var checkRow = inputs[i];
                        //tr对应table的行
                        var tr = checkRow.parentNode.parentNode;
                        //tds对应每一行中的对应的每一列
                        var tds = tr.cells;
　　　　　　　　　　　　　　// 组织要发送的数据
                        var temp = new Array();
                        temp[0] = tds[0].innerHTML;
                        temp[1] = tds[2].getElementsByTagName("input")[0].value;
                        allData[num] = temp;
                        num++;
                    }
                }
            };
            
            //将数据使用ajax发送到后端，调用后端接口
            $.ajax({
                type:"POST",
                //后端接口
                url:"/handle",
                contentType:"application/json",
                dataType:"json",
                //数据
                data: JSON.stringify({shopInfo : allData}),
                success:function(){
                    alert("ok");
                },
                error: function(){
                    alert("error");
                }
            });    
        }

    </script>



     <form>
         <table border="1px" id="test">
             <thead>
                 <tr>
                     <th>id</th>
                     <th>name</th>
                     <th>age</th>
                     <th>isselected<input type="checkbox" name="cbtest" onclick="AllCheck(this.form)"></th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
                     <td>1</td>
                     <td>zy</td>
                     <td>18</td>
                     <td><input type="checkbox" name="cbtest"></td>
                 </tr>
                 <tr>
                     <td>2</td>
                     <td>junjun</td>
                     <td>18</td>
                     <td><input type="checkbox" name="cbtest"></td>
                 </tr>
             </tbody>
         </table>
         <input type="submit" name="sbtest" onclick="sendDataTo(‘test‘)">
     </form>

</body>
</html>

 

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


联系
我们