獲取選中的所有復選框值，使用 AJAX：DJANGO 按行排列

Question

我有代碼應該 select 選中復選框的表中的所有行。 所以首先我將描述我的表結構。

所以這里會有很多行，所以我應該 select 我需要哪個服務器以及我應該執行哪個操作。 因此，如果我有兩個服務器 ABC 和 BCD，如果我想為 ABC 執行啟動操作，為 ABC 執行停止操作，我應該 select 來自第一個復選框的各個服務器，並從與服務器名稱在同一行的復選框中進行相關操作。 我應該將所有值逐行傳遞給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)")並將選中的復選框值推送到內部數組中，最后將此內部數組值放入外部 arrays 並將其傳遞給 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>