关闭模式时如何取消选中所有复选框？答案

【问题标题】：How to uncheck all checkboxes when i close a modal?关闭模式时如何取消选中所有复选框？
【发布时间】：2019-06-06 06:09:13
【问题描述】：

我想在单击复选框时弹出一个模式。并且想在我自动关闭模式时取消选中它。

我尝试了 attr 和 prop 方法。他们都没有工作。

//uncheck all when modal closes 
$(document).on('click', '#closeInvoiceModal', function() {
    $('.creditCheckbox').prop('checked', false);
});

这应该取消选中具有相同类“.creditCheckbox”的所有复选框。但没有一个没有关闭。

<td>
    <input type="checkbox" id="invoiceDetail{{$loop->iteration}}"
            name="invoiceDetail{{$loop->iteration}}"
            class="filled-in chk-col-green invoiceCheckbox"
            data-campaignId="{{$item['id']}}"/>
   <label class="invoiceDetailLink" for="invoiceDetail{{$loop- 
            >iteration}}">Inv. Details</label>
</td>

<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Full screen view</h5>
                <button type="button" class="close" data- 
                 dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span> 
                 </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12 col-xs-12 col-sm-7">
                    <div class="box_layout" id="show-data">
                        <div class="image_layout">

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="closeInvoiceModal" type="button" 
                    class="btn btn-sm btn-success waves-effect 
                     pull-right" data- 
             dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

也发布你的html代码
Inv.详细信息
请尝试一次，$('#closeInvoiceModal').on('hidden.bs.modal', function (e) { $('.creditCheckbox').prop('checked',假）；}）
@yashdubey。我试过了，但没有用。

【解决方案1】：

请使用此代码，希望它对您有用。

谢谢

$(document).ready(function(){
    $("#myModal").on('hide.bs.modal', function(){
         $('.creditCheckbox').prop('checked', false);
  });
});

【讨论】：

不工作。此外，我的模态 ID 不同。不是我的模态。
您使用的是引导模型，对吧？这个getbootstrap.com/docs/4.0/components/modal 请检查您的代码或将您的 HTML 代码发送给我，谢谢
我无法在您的 HTML 中找到 .creditCheckbox 类，这意味着复选框请在您的复选框中添加 class=creditCheckbox。
对不起，是的，那是错误。我不小心使用了其他一些复选框类名。谢谢。

【解决方案2】：

我必须像你的代码一样做一个例子，请检查一次，希望它对你有帮助，它对我有用。谢谢。

<div class="container">
  <input type="checkbox" name="check" class="checkOption"> check 1
  <input type="checkbox" name="check" class="checkOption"> check 2
  <input type="checkbox" name="check" class="checkOption"> check 3
  <input type="checkbox" name="check" class="checkOption"> check 4
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cbreInvoiceDetailsModal">Open Modal</button>

  <!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Full screen view</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span> 
                 </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12 col-xs-12 col-sm-7">
                    <div class="box_layout" id="show-data">
                        <div class="image_layout">

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="closeInvoiceModal" type="button" 
                    class="btn btn-sm btn-success waves-effect pull-right" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

</div>

<script>
  $(document).ready(function(){
    $("#cbreInvoiceDetailsModal").on('hide.bs.modal', function(){
      $('.checkOption').prop('checked', false);
  });

});
</script>

【讨论】：

这也有帮助。我使用了错误的班级名称。谢谢。