I have a form with a number of check boxes,I want to delete images that their checkboxes has been checked, by deleting through their id, please what will be the best way to pass both all the checked check boxes respective ids to my PHP code.
<button class="delete btn btn-outline-primary dropdown-toggle" style="margin-left: 10px" id="saveReorder1">Delete Multiple</button><br/>
<div id="deleteHelper" style="display:none;">
<span class="selected-txt mt-5 ml-5"
style="text-align: left">1. Select the check boxes of the images you want to delete </span></div>
<ul class="reorder row" style="margin-left: 30px">
<form id="chk-all" class="row">
@foreach ($images as $image)
<input type="checkbox" name="chk" class="chk" style="display: none;"><li class="img-box" data-src="{{$image->filename}}" id="{{$image->id}}">
<div class="img-w" data-src="{{$image->filename}}"
style="background-image: url('{{$image->filename}}')"></div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;display: inline;margin-left: 10px;">{{$image->description}} <i class="fa fa-upload"
style="margin-left: 10px; color:#333333;"></i><i class="far fa-trash-alt del1" id="{{$image->id}}" style="margin-left: 10px; color:#333333;cursor: pointer;float:right"></i></span></li>@endforeach</form></ul>
$('.delete').on('click',function(e){
e.preventDefault();
e.stopPropagation();
$('#deleteHelper').slideDown('slow');
$("ul.reorder").find('.chk').fadeToggle();
$('.chk').on('click',function(e){
$('.delete').html('Delete Selected');
});
let form = $('#chk-all').serialize();
$('.delete').attr("id", "deletes");
$("#deletes").click(function (e) {
if (!$("#deletes i").length) {
$(this).html('').prepend('deleting...').delay(1000).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
}
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "delete.php",
dataType: 'json',
success: function (h) {
window.location.reload();
// console.log(h);
}
// $("ul.reorder").find('#chk-form')
});
});