Jquery取消选中未正确重新设置

Question

//Check boxes Function 
$(function() {
//If check_all checked then check all table rows
$("#check_all").on("click", function () {
if ($("input:checkbox").prop("checked")) {
$("input:checkbox[name='row-check']").prop("checked", true);
} else {
$("input:checkbox[name='row-check']").prop("checked", false);
}
});
// Check each table row checkbox
$("input:checkbox[name='row-check']").on("change", function () {
var allchkbx = $("input:checkbox[name='row-check']").length;
var ttchkbx = $("input:checkbox[name='row-check']:checked").length;
// If all checked manually then check check_all checkbox
if (allchkbx === ttchkbx) {
$("#check_all").prop("checked", true);
}
else {
$("#check_all").prop("checked", false);
}
});

$("#sendall").on('click', function() {
var array = [];
$("input:checked").each(function() {
array.push($(this).val());
});

//  console.log(array); //debug log
$('#sendall_Modal').modal('show'); 
$('#sendall_form').on("submit", function(event){  
event.preventDefault();
var dbarray = JSON.stringify(array);
// console.log(dbarray);
$.ajax({  
url:"../../bl/office/sendall.php",  
method:"POST",  
data:{dbarray:dbarray}, 
cache:false, 
success:function(data){  
$('#sendall_form')[0].reset();
$('#sendall_Modal').modal('hide');
},
}); 

});
});
});

我使用此代码将消息ID传递给php脚本，然后该脚本通过选择具有传递ID的消息来向客户端电话号码发送SMS。当我使用check-all并重新加载页面时，我的代码运行良好。但是，如果我在不重新加载的情况下从同一个表中选择记录，上面的代码将首先将以前选择的记录传递给php脚本，然后传递新选择的记录。

当我在检查了所有记录的情况下单击发送时，我的开发工具将向sendall.php脚本显示一个请求。

如果我取消选中所有复选框，那么开发工具将显示两个请求，第一个包含所有记录，第二个包含较少记录。

如何确保取消选中后只有一个sendall.php请求？

这是我的sendall.php脚本

$data = json_decode(stripslashes($_POST['dbarray']));

if ($data[0] == "on"){
foreach(array_slice($data,1) as $d){
$query = "SELECT msisdn, message FROM off_texts where id=$d";
$result = mysqli_query($conn, $query);
$rows = mysqli_fetch_assoc($result);
$phoneno = $rows['msisdn'];
$text = $rows['message'];
}
}
else {
foreach(array_slice($data,0) as $d){
$query = "SELECT msisdn, message FROM off_texts where id=$d";
$result = mysqli_query($conn, $query);
$rows = mysqli_fetch_assoc($result);
$phoneno = $rows['msisdn'];
$text = $rows['message'];
}
};

这是我的模式html

<div id="sendall_Modal" class="modal fade">  
<div class="modal-dialog">  
<div class="modal-content">  
<div class="modal-header"> 
<h5 class="modal-title" id="modal-title"></h5>  
<button type="button" class="btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="modal-title" id="modal-title"></h5> 

</div>  
<div class="modal-body">  
<form id="sendall_form">
<label>Confirm:</label>

<p> Are you sure you want to send these Messages? </p>
<br /> 

<input type="submit" name="ainsert" id="ainsert" value="Send" class="btn btn-success" />  
</form>  
</div>  
<div class="modal-footer">  
<button type="button" class="btn btn-primary" data-dismiss="modal" data-bs-dismiss="modal">Close</button>  
</div>  
</div>  
</div>  
</div>

Answer 1

您已将$('#sendall_form').on("submit", function(event){放入$("#sendall").on('click', function() {中。这意味着每当用户点击"；sendall"；它将注册另一个"；提交"；事件处理程序。它不会删除以前的。因此，如果有人单击sendall两次，那么下次提交表单时，它将发送两个AJAX请求(因为事件处理程序已注册两次(。

据我所知；sendall"；按钮可能只需要打开模态。提交表单时可以进行所有其他处理。声明"；提交"；事件处理程序应该在"；点击"；处理程序，因此它只绑定到表单一次。

类似这样的东西：

$("#sendall").on('click', function() {
//  console.log(array); //debug log
$('#sendall_Modal').modal('show'); 
});
$('#sendall_form').on("submit", function(event){  
event.preventDefault();
var array = [];
$("input:checked").each(function() {
array.push($(this).val());
});
var dbarray = JSON.stringify(array);
// console.log(dbarray);
$.ajax({  
url:"../../bl/office/sendall.php",  
method:"POST",  
data:{dbarray:dbarray}, 
cache:false, 
success:function(data){  
$('#sendall_form')[0].reset();
$('#sendall_Modal').modal('hide');
},
}); 
});