實現前端table中checkbox全選功能，並將選中的數據發送到後端

時間 2019-11-08

標籤實現前端 table checkbox 全選功能選中數據發送後端欄目 HTML 简体版

原文原文鏈接

1、需求javascript

1. 點擊這個checkbox按鈕，會選中下面所用checkbox，固然在選中的狀況下點擊，會將下面全部選中的checkbox取消；html

2. 當下面使用submit的提交按鈕時，會將全部checkbox選中的數據提交給後端；java

2、實現jquery

一、實現全選checkbox功能ajax

技術分析：其實這裏能夠使用js活着jquery兩種方式，我暫時使用的是js中的dom實現的，具體代碼以下：json

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

二、實現獲取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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。