Как определить, снят ли какой-либо флажок в случае нескольких флажков с одинаковым именем

Question

Мне нужно определить при отправке сообщения ajax, если есть хотя бы один непроверенный флажок из списка из нескольких с тем же именем и разными значениями.

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

Если пользователь снял хотя бы один флажок, переменная флага должна быть установлена ​​в 1 и отправлена ​​на сервер. Я нашел несколько примеров того, как определить состояние определенного флажка, но как я могу проанализировать все из них, чтобы убедиться, что хотя бы один из них не был проверен перед отправкой формы?

Наконец, как я могу добавить кajax опубликует эту дополнительную флаговую переменную, скажем, 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

Вы можете использовать условие ниже, чтобы узнать, снят ли хотя бы один флажок

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 2

Вы можете использовать :not(:checked), чтобы найти любые непроверенные ящики. Затем вы можете добавить значение в строку запроса, сгенерированную serialise(). Попробуйте это:

var unchecked = $(':checkboxes:not(:checked)').length > 0 ? 1 : 0;

// in the $.ajax settings:
data: form.serialize() + '&unchecked_boxes=' + unchecked,

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>