如何通过确认模式JQuery Flask传递已选中复选框的列表

Question

我正在尝试创建一个用户可以删除多个记录的页面。这些记录在表中，并通过jinja2 for循环生成。每个都有一个复选框作为表格行，其中record_id为值。我遇到的问题是尝试将已检查值列表（record_ids）传递给模态。虽然我能够通过模态id字段或data-yourparameter将变量传递给模态，但我似乎无法找到传递已检查值的列表的方法。我认为这个技巧在JQuery的某个地方，但我对它知之甚少。我的目标是以某种方式将已选中复选框的值列表传递给模态中的pass_checkedvalue输入。

任何帮助是极大的赞赏！

这是我到目前为止所尝试的：

HTML：

 <form name="table-form" method="POST">
  {% for record in table %}
    <tr>
    <td> <input type="checkbox" name="checked[]" value="{{ record.id }}"> 
    </td>
    <td>{{record.name}}</td>
    </tr>
    {% endfor %}
    <a data-toggle="modal" class="btn btn-primary" id="btn_multidelete" value="btn_display_value" data-target="#multiconfirm-modal"> Delete selected</a>
    </form>


<!-- Modal for Confirm Multi-Delete popup-->
<div class="modal" tabindex="-1" role="dialog" id="multiconfirm-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these API users?</p>
</div>
<div class="modal-footer align-items-start">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="{{ url_for('multidelete') }}" method="POST">
<input name="pass_checkedvalue" type="hidden" value="pass_checkedvalue" id="hidden_checkedinput">
<input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">
    </form>
</div>
</div>
</div>
</div>

JQuery脚本：

<!-- This script allows checked values to be passed to multi-confirm modal  -->
<script>
$('#multiconfirm-modal').on('show.bs.modal', function(e) {
var checkedvalue = $('.checked[]:checked').val();
$('#hidden_checkedinput').val(checkedvalue)
});

Answer 1

在复选框上放置一个类（我放record），然后选择所有已检查的记录，将它们的值映射到数组中，然后将该数组连接到一个字符串中以放入隐藏变量中。

$('#multiconfirm-modal').on('show.bs.modal', function(e) {
  var checkedValues = $('.record:checked').map(function(){ return this.value; }).get();
  //put the ids in the hidden input as a comma separated string
  $('#hidden_checkedinput').val(checkedValues.join(','));
});

<form name="table-form" method="POST">
  {% for record in table %}
  <tr>
    <td> <input type="checkbox" class="record" name="checked[]" value="{{ record.id }}">
    </td>
    <td>{{record.name}}</td>
  </tr>
  {% endfor %}
  <a data-toggle="modal" class="btn btn-primary" id="btn_multidelete" value="btn_display_value" data-target="#multiconfirm-modal"> Delete selected</a>
</form>