选中所有复选框值，使用 AJAX 逐行显示表格：DJANGO

Question

我的代码应该从选中复选框的表中选择所有行。所以首先我将描述我的表结构。

所以这里会有很多行，所以我应该选择我需要的服务器和我应该执行的操作。因此，如果我有两台服务器 ABC 和 BCD，如果我想为 ABC 执行启动操作，为 ABC 执行停止操作，我应该从第一个复选框中选择相应的服务器，并从与服务器名称位于同一行的复选框中选择相关操作。我应该将所有值逐行传递给views.py以执行其他操作。

所以目前我写了一个代码，即使我没有选中复选框，它也会给我价值。而且我无法弄清楚问题。任何人都可以帮助我。

这是我的 AJAX 调用：

 $("[name=ButtonSubmit]").click(function(){
                            var myarrayServer = [];
                            var myarrayStart = [];
                            var myarrayRestart = [];
                            var myarrayStop =[];
                            var message = " ";
                            $(".form-check-input0:checked").each(function() {
                                var row = $(this).closest("tr")[0];
                                message += row.cells[1].innerHTML;
                                message += "   " + row.cells[2].innerHTML;
                                message += "   " + row.cells[3].innerHTML;
                                message += "   " + row.cells[4].innerHTML;
                                var checkedValue = $('#flexSwitchCheckDefaultStart:checked').val();
                                message += "   "+checkedValue;
                                var checkedValue2 = $('#flexSwitchCheckDefaultRestart:checked').val();
                                message += "   "+checkedValue2;

                                // if (row.cells[5].children()[0].is(':checked')) {   
                                //   message += "   " + row.cells[5].children[0].value;
                                // }
                                message += "\n";
                                alert(message);
                                
                     
                             
                            
                             var formdataD = new FormData();
                             formdataD.append('myarrayServer', message);
                           
                             $.ajax({
                                 url: "secondtableonDashboard", //replace with you url
                                 method: 'POST',
                                 data: formdataD,
                                 datatype:'json',
                                 processData: false,
                                 contentType: false,
                                 success: function(data) {
                                  //  alert("message: " + data.message);
                                 },
                                 error: function(error) {
                                  //  alert('error..'+error);


                                 }
                           });
                          });
                       });

这里是 HTML：

<tbody id="myTable">
                                               {% for item in objs %}
                                              <tr>
                                                  <td>
                                                    <div class="form-check form-switch">
                                                      
                                                            <input class="form-check-input0" name="Services1" value="{{item.Component}}" type="checkbox" id="flexSwitchCheckDefault">
                                                            <label class="form-check-label0" for="flexSwitchCheckDefault">

                                                    </div>
                                                  </td>
                                                  <td>{{item.ServerName}}</td>
                                                  <td>{{item.Component}}</td>
                                                  <td>{{item.PID}}</td>
                                                  <td>
                                                    {{item.State}}</td>
                                                  <td id="hideInnerHTML">
                                                      <input class="form-check-input1" name="Start" value="START" type="checkbox" id="flexSwitchCheckDefaultStart">
                                                      <!-- <label class="form-check-label1 services" for="flexSwitchCheckDefault"> -->
                                                        Start
                                                  </td>
                                                  <td id="hideInnerHTML">
                                                      <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox" id="flexSwitchCheckDefaultRestart">
                                                      <!-- <label class="form-check-label2 services" for="flexSwitchCheckDefault"> -->
                                                </td>
                                                  <td id="hideInnerHTML">
                                                      <input class="form-check-input3" name="Stop" value="STOP" type="checkbox" id="flexSwitchCheckDefault">
                                                      <!-- <label class="form-check-labe3l services" for="flexSwitchCheckDefault"> -->
                                                </td>
                                                  </tr>
                                                {% endfor %}
                                                </form>
                                                  </tbody>

Answer 1

首先，在您的代码中，您使用了具有相同名称的多个 id，因此只需将其删除或仅使用 class 即可。然后，每当单击您的 ButtonSubmit 时，首先获取 servername 并推送它在内部数组中的值。现在，要在同一行中获取其他复选框值，您可以使用 .closest("tr").find("input[type=checkbox]:checked:not(:first)") 并将选中的复选框值推送到内部数组中，最后将此内部数组值传递给外部数组并将其传递给 ajax。

演示代码：

$("[name=ButtonSubmit]").click(function() {
  console.clear()
  var myarrayServer = [];
  $(".form-check-input0:checked").each(function() {
    var opeartions = [] //for inner array
    var row = $(this).closest("tr");
    //get servername 
    var server_name = row.find("td:eq(1)").text().trim();
    opeartions.push(server_name) //push in array
    //get checkboxes which is checked in same row 
    row.find("input[type=checkbox]:checked:not(:first)").each(function() {
      opeartions.push($(this).val())
    })
    myarrayServer.push(opeartions) //push values in main array
  });
  console.log(myarrayServer);
  var formdataD = new FormData();
  formdataD.append('myarrayServer', myarrayServer);
  //here ajax call 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <th></th>
    <th>Servername</th>
    <th>Component</th>
    <th>PID</th>
    <th>State</th>
    <th>Start</th>
    <th>Restart</th>
    <th>Stop</th>
  </thead>
  <tbody id="myTable">

    <tr>
      <td>
        <div class="form-check form-switch">

          <input class="form-check-input0" name="Services1" value="A" type="checkbox" id="flexSwitchCheckDefault">
          <label class="form-check-label0" for="flexSwitchCheckDefault"></label>

        </div>
      </td>
      <td>A</td>
      <td>Somethings</td>
      <td>1</td>
      <td>
        Running</td>
      <td>
        <input class="form-check-input1" name="Start" value="START" type="checkbox">
      </td>
      <td>
        <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox">

      </td>
      <td>
        <input class="form-check-input3" name="Stop" value="STOP" type="checkbox">

      </td>
    </tr>
    <tr>
      <td>
        <div class="form-check form-switch">

          <input class="form-check-input0" name="Services1" value="A" type="checkbox">
          <label class="form-check-label0" for="flexSwitchCheckDefault"></label>

        </div>
      </td>
      <td>B</td>
      <td>Somethings</td>
      <td>2</td>
      <td>
        Running</td>
      <td>
        <input class="form-check-input1" name="Start" value="START" type="checkbox">
      </td>
      <td>
        <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox">

      </td>
      <td>
        <input class="form-check-input3" name="Stop" value="STOP" type="checkbox">

      </td>
    </tr>

    </form>
  </tbody>
</table>
<button name="ButtonSubmit">Send</button>