How do I change the array values by getting multiple selected checkbox values?

I am try to use Ajax to Post value of an array at a time sequentially. There is working if the array values are fixed.But it is not working if the values are variable. How could I change the array values of "startProcess" by getting multiple selected checkbox values? Deeply appreciated for the help.

function x_print() {
idx = 0;

var checkboxes = document.getElementsByName('multiple_id');
var spid = "";
for (var i=0, n=checkboxes.length;i<n;i++) 
{
    if (checkboxes[i].checked) 
    {
        spid += ',"'+checkboxes[i].value+'"';
    }
}
if (spid) spid = spid.substring(1);
///////////////////////
/// How to put "spid" into "startProcess" array?
//////////////////////

startProcess(["2505283JTS29U2","2505283FGSRJQ6","2505283E13UJJM"]); /// change values here

function startProcess(arg){
  if(typeof arg[idx] !== 'undefined'){
  
  $('.append-range_'+arg[idx]).html("<img src=img/loadinggraphic.gif>");

$.ajax({
      url: "loopok.php",
      method: 'post',
      query: arg[idx],
      data: {
            od_id: arg[idx],
        },
      success: function(resp){
        if(resp == "OK"){
          $('.append-range_'+arg[idx]).html('<strong>ID：</strong>'+arg[idx]+'　<span style=color:blue;>OK</span><br>')
        }else{
          $('.append-range_'+arg[idx]).html('<strong>ID：</strong>'+arg[idx]+'　<span style=color:red;>NG</span><br>')
        }
        idx++;
        startProcess(arg);
      }
    })
      }
}}

<div class="container">
    <div class="row">
        <h1>Range between two dates:</h1>
    </div>
    <br>
            <div class="row">
        <div class="append-range_111"></div>
        <div class="append-range_222"></div>
        <div class="append-range_333"></div>
    </div>
    <div class="row">
        <div class="append-range"><input type="checkbox" name="multiple_id" value="111"></div>
        <div class="append-range"><input type="checkbox" name="multiple_id" value="222"></div>
        <div class="append-range"><input type="checkbox" name="multiple_id" value="333"></div>
    </div>
    <div class="row">
        <input type="button" class="submit_button" onclick="x_print()" value="　PROCESS　">
    </div>
</div>

Solution

You can achieve this by:

Listening for checkbox changes
Collecting the checked values into an array
Updating your data accordingly

Here’s a working example using plain JavaScript:

HTML:

<input type="checkbox" name="option" value="apple"> Apple<br>
<input type="checkbox" name="option" value="banana"> Banana<br>
<input type="checkbox" name="option" value="cherry"> Cherry<br>

<button onclick="updateSelected()">Update Array</button>

<p id="output"></p>

JavaScript:

let selectedValues = [];

function updateSelected() {
const checkboxes = document.querySelectorAll('input[name="option"]:checked');
selectedValues = Array.from(checkboxes).map(cb => cb.value);

// Output to show the array
document.getElementById("output").innerText = "Selected: " + selectedValues.join(", ");
}

Explanation:

querySelectorAll('input[name="option"]:checked'): Gets all checked checkboxes.
Array.from(...).map(...): Extracts the .value of each.
selectedValues holds your updated array.

Example Output:

If you check “Apple” and “Cherry”, then click the button:

Selected: apple, cherry

Give a try and let me know :)

HTML Code Updated:

<!DOCTYPE html>
<html>

<head>
  <title>Process Checkbox Values with Ajax</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <h1>Range between two dates:</h1>
    </div>
    <br>
    <div class="row">
      <div class="append-range_111"></div>
      <div class="append-range_222"></div>
      <div class="append-range_333"></div>
    </div>
    <div class="row">
      <div class="append-range"><input type="checkbox" name="multiple_id" value="111"> ID 111</div>
      <div class="append-range"><input type="checkbox" name="multiple_id" value="222"> ID 222</div>
      <div class="append-range"><input type="checkbox" name="multiple_id" value="333"> ID 333</div>
    </div>
    <div class="row">
      <input type="button" class="submit_button" onclick="x_print()" value="　PROCESS　">
    </div>
  </div>

  <script>
    let idx = 0;

    function x_print() {
      idx = 0;

      // Collect checked checkbox values into an array
      let checkboxes = document.getElementsByName('multiple_id');
      let selectedIds = [];
      // Loop through all checkboxes and collect checked values
      for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          selectedIds.push(checkboxes[i].value);
        }
      }
      
      // alert/log the selected IDs to the console
      console.log("Selected IDs:", selectedIds);

      // If at least one checkbox is selected, start processing
      if (selectedIds.length > 0) {
        startProcess(selectedIds);
      } else {
        alert("Please select at least one checkbox.");
      }
    }

    function startProcess(arg) {
      if (typeof arg[idx] !== 'undefined') {
        let currentId = arg[idx];

        $('.append-range_' + currentId).html("<img src='img/loadinggraphic.gif'>");

        $.ajax({
          url: "loopok.php",
          method: 'POST',
          data: {
            od_id: currentId,
          },
          success: function (resp) {
            if (resp == "OK") {
              $('.append-range_' + currentId).html('<strong>ID：</strong>' + currentId + '　<span style="color:blue;">OK</span><br>');
            } else {
              $('.append-range_' + currentId).html('<strong>ID：</strong>' + currentId + '　<span style="color:red;">NG</span><br>');
            }
            idx++;
            startProcess(arg); // Recursively process the next ID
          },
          error: function () {
            $('.append-range_' + currentId).html('<strong>ID：</strong>' + currentId + '　<span style="color:red;">Error</span><br>');
            idx++;
            startProcess(arg); // Continue on error
          }
        });
      }
    }
  </script>
</body>

</html>