Ajax returns 3 arrays instead of 1?

Question

JavaScript

Here is the code to select all checkboxes:

jQuery(document).ready(function($) {
      $("#select_all").change(function () {
        $("table input:checkbox").prop('checked', $(this).prop("checked"));
      });
      $(document).on('change', '.checkbox', function(event) {
        var values = [];
        $('input[type="checkbox"]:checked').each(function() {
          if( $.isNumeric($(this).val())  ){
            values.push($(this).val());
          }
        });
 				$(document).on('click', '.mass_delete', function( ) {
          $.ajax({
            url: '/deleter.php',
            type: 'POST',
            data: {
              ids: values,
            },
          })
          .done(function(response) {
            alert(response);
            console.log("Success!");
          });
        });
      });
    });

Php says this:

$ids = $_POST['ids'];
print_r($ids );
exit;

If you select the first checkbox, as you can see from the script, it will select everything at once, put it in an array, and then when I send it with Ajax, it will return only an array with 3 values, however, if you click on each checkbox separately, it adds all the checkboxes that have a status checked into an array, so if you send an Ajax request. it will output arrays for each checkbox, and all checkboxes that came with it. I need 1 single array of all checkboxes, there are post IDs for deletion. How to fix?

Answer 1

when you click on "delete", then collect an array with checkboxes