如何检测在多个具有相同名称的复选框的情况下是否取消选中任何复选框

Question

我需要在 ajax 提交帖子时检测是否从具有相同名称和不同值的多个复选框的列表中至少有一个未选中的复选框。

<input type="checkbox" name="product_id[]" value="<?php echo $product->id;?>" checked>

如果用户取消选中了至少一个复选框，则应将标志变量设置为 1 并发送到服务器。我找到了几个关于如何检测特定复选框状态的示例，但是在提交表单之前，我如何解析所有这些示例以验证是否至少取消选中了一个复选框？

最后，我如何向 ajax post 添加这个进一步的标志变量，假设 uncecked_boxes=1;如果我使用 form.serialize(( 函数来填充数据字段？

$("#desktop_new_alarm_research").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = ajax_url+'Login/getResearchResultsForNewPriceAlarms';
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
$('#research_results_container').html(data);
alert(data); // show response from the php script.
}
});

});

Answer 1

您可以使用:not(:checked)查找任何未选中的框。然后，可以将该值追加到serialise()生成的查询字符串中。试试这个：

var unchecked = $(':checkboxes:not(:checked)').length > 0 ? 1 : 0;
// in the $.ajax settings:
data: form.serialize() + '&unchecked_boxes=' + unchecked,

Answer 2

您可以使用以下条件来了解是否至少取消选中了一个复选框

var allChkLength = $('input[type="checkbox"][name="product_id[]"]').length;
var onlyCheckedChkLength = $('input[type="checkbox"][name="product_id[]"]:checked').length;
if(allChkLength > onlyCheckedChkLength){
console.log("at least one checkbox is unchecked");
} else {
console.log("all checkbox are checked");
}

Answer 3

您可以使用属性选择器[name="..."]、:not()选择器和:checked选择器的组合来查找给定名称的任何未选中的复选框。然后，您将检查这组元素的长度是否> 0，以便设置参数。

附加说明：您可能不应该依赖此可能被篡改的客户端检查。根据此信息的关键性和副作用，检查是否有任何未选中的框的逻辑最好在服务器端进行预处理！

$('#desktop_new_alarm_research').on('submit', function(ev) {
// for the sake of this demo only:
ev.preventDefault();
var uncheckedCount = $('[name="product_id[]"]:not(:checked)').length;
console.log($(this).add('<input type="hidden" name="uncecked_boxes" value="' + (uncheckedCount ? 1 : 0) + '">').serialize());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="desktop_new_alarm_research">
<input type="checkbox" name="product_id[]" value="<?php echo $product->id;?>" checked><br>
<input type="checkbox" name="product_id[]" value="<?php echo $product->id;?>" checked><br>
<input type="checkbox" name="product_id[]" value="<?php echo $product->id;?>" checked><br>
<button type="submit" id="checkBtn">check</button>
</form>