Javascript 如何对所选项目启用操作

我正在一个网站（Python+Flask）上开发一个管理面板，在尝试实现全选切换时遇到了一个问题

该表如下所示：

切换本身已经实现，但现在我想让它变得有用

单击“SELECTED”（选定）按钮后，我希望能够删除每个选定的项目（标志），但我不确定如何将其删除

根据以下Python/HTML，通过单击glyphicon垃圾箱，可以单独删除每个标志：

<button onclick="deleteSelected('politician')">SELECTED</button>
{% for flag in flags %}
  <tr>
    <!-- Check box -->
    <td style="width: 60px;"><input type="checkbox" name="politician" value="bar1"></td>
    <!-- First Name -->
    <td class="col-title">{{flag.flagtitle}}</td>
    <!-- Last Name -->
    <td class="col-description">{{flag.flagreason}}</td>
    <!-- Details -->
    <td>
      <a href="/flag/{{ flag.idflag }}">
        <span class="glyphicon glyphicon-info-sign"></span>
      </a>
    </td>
    <!-- Edit icon -->
    <td class="list-buttons-column">
      <a href="/politician/{{ flag.politician }}">
        <span class="glyphicon glyphicon-pencil"></span>
      </a>
    </td>

    <!-- DELETE ITEM/FLAG -->
    <td class="col-delete">
      <form action ="/delete_flag/{{ flag.idflag }}" method="POST">
        <button onclick="return confirm('Are you sure you want to delete this flag?');">
          <span class="fa fa-trash glyphicon glyphicon-trash"></span>
        </button>
      </form>
    </td>

  </tr>
{% endfor %}

显然，上面的代码不起作用，它只是想让你知道我在寻找什么

我有办法做到这一点吗？提前谢谢

编辑：

---

好吧，我想起来了。考虑到我必须在

action=“/delete\u flag/flag.idFlag”

中提交多个表单，我在表中添加了一列，在该列中可以看到标志的id。例如：

为此，我创建了一个JS函数来检索每一行（ID）的第一个值，并将其存储在ID数组中，以便为每一行创建并提交一个表单

对于数组的每个ID，我创建一个表单，其中

form.action=“/delete\u flag/”+retrievedID

。请参阅下面的代码

function deleteRecords() {
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            delFlagForm.submit(); 
        }
}

function deleteRecords() {
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            delFlagForm.submit(); 
        }
}

函数deleteRecords（）{
var arrayOfIDs；
arrayOfIDs=$（“#表样式”）.find（“[type=“checkbox”]：checked”）.map（函数（）{
返回$（this）.closest（'tr'）.find（'td:nth child（2）'）.text（）；
}).get（）；
var delFlagForm=document.createElement（“表单”）；
var作用；
变形虫；
var submitFormStr；
对于（变量i=0；i

在我意识到多个表单提交只能异步工作之前，这在我脑海中听起来很好所以我做了以下更改，这就是我现在遇到的问题。表格根本不会提交，不会发生任何情况：

function deleteRecords() {
    var arraryOfIDs;
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }
        $('submitFormStr').submit();
        return false;
}

function deleteRecords() {
    var arraryOfIDs;
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }
        $('submitFormStr').submit();
        return false;
}

函数deleteRecords（）{
变种arraryOfIDs；
arraryOfIDs=$（“#表样式”）.find（“[type=“checkbox”]：checked”）.map（函数（）{
返回$（this）.closest（'tr'）.find（'td:nth child（2）'）.text（）；
}).get（）；
var delFlagForm=document.createElement（“表单”）；
var作用；
变形虫；
var submitFormStr；
对于（变量i=0；i

循环中更新的变量

submitFormStr

存储了创建的每个表单的id，如下所示：

#form0#form1

，因此，我不理解为什么这段代码

$（'submitFormStr'）。submit（）

相当于

$（'#form0#form1'）。submit（）不工作

有什么我做错了吗？
好吧，我想出来了。考虑到我必须在
action=“/delete\u flag/flag.idFlag”
中提交多个表单，我在表中添加了一列，在该列中可以看到标志的id。例如：


为此，我创建了一个JS函数来检索每一行（ID）的第一个值，并将其存储在ID数组中，以便为每一行创建并提交一个表单

对于数组的每个ID，我创建一个表单，其中
form.action=“/delete\u flag/”+retrievedID
。请参阅下面的代码

function deleteRecords() {
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            delFlagForm.submit(); 
        }
}

function deleteRecords() {
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            delFlagForm.submit(); 
        }
}

函数deleteRecords（）{
var arrayOfIDs；
arrayOfIDs=$（“#表样式”）.find（“[type=“checkbox”]：checked”）.map（函数（）{
返回$（this）.closest（'tr'）.find（'td:nth child（2）'）.text（）；
}).get（）；
var delFlagForm=document.createElement（“表单”）；
var作用；
变形虫；
var submitFormStr；
对于（变量i=0；i

在我意识到多个表单提交只能异步工作之前，这在我脑海中听起来很好所以我做了以下更改，这就是我现在遇到的问题。表格根本不会提交，不会发生任何情况：

function deleteRecords() {
    var arraryOfIDs;
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }
        $('submitFormStr').submit();
        return false;
}

function deleteRecords() {
    var arraryOfIDs;
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }
        $('submitFormStr').submit();
        return false;
}

函数deleteRecords（）{
变种arraryOfIDs；
arraryOfIDs=$（“#表样式”）.find（“[type=“checkbox”]：checked”）.map（函数（）{
返回$（this）.closest（'tr'）.find（'td:nth child（2）'）.text（）；
}).get（）；
var delFlagForm=document.createElement（“表单”）；
var作用；
变形虫；
var submitFormStr；
对于（变量i=0；i

循环中更新的变量
submitFormStr
存储了创建的每个表单的id，如下所示：
#form0#form1
，因此对于此区域