CODEWITHSUNDEEP
jquerycheckbox
fede72bari
fede72bari

Reputation: 543

How to detect if any checkbox is unchecked in case of multiple checkboxes with same name

I need to detect at ajax post submitting if there is at least one unchecked checkbox from a list of several ones with the same name and different values. 

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

In case the user had unchecked at least one checkbox a flag variable should be set to 1 and sent to the server. I found several examples about how to detect the state of a specific checkbox, but how could I parse all of them to verify if at least one has been unchecked before submitting the form?

Finally, how could I add to ajax post this further flag variable, let's say uncecked_boxes=1; if I use the form.serialize() function to populate the data field?

$("#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.
       }
     });


});

Upvotes: 2

Views: 1538

Answers (3)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You can use a combination of the attribute selector [name="..."], :not() selector and :checked selector to find any unchecked checkboxes of a given name. You would then check to see if the length of this set of elements is > 0 in order to set your parameter.

Additional note: You probably shouldn't rely on this client-side check that might get tampered with. Depending on the criticality and side effects of this information, the logic for checking whether there are any unchecked boxes would better be implemeneted server-side!

$('#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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337590

You can use :not(:checked) to find any unchecked boxes. You can then append the value to the querystring generated by serialise(). Try this:

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

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

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use below condition to know if atleast one checkbox is unchecked

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");
}

Upvotes: 1

Related Questions