如何通过确认模态瓶盖传递检查复选框列表

Question

我正在尝试创建一个可以删除多个记录的页面。这些记录在表中，是通过jinja2生成的。每个人都有一个复选框，作为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>