如何从从 Javascript 创建的复选框中检索值？

Question

I was following the sample code provided by another post (source: How to display multiple list of checkboxes dynamically on dropdown list ), as it has the function that was exactly what I was trying to do for my webpage. However, I am having trouble retrieving the value of the checkbox that the user has selected, as the checkbox was dynamically created from the javascript. I tried debugging by inserting an alert function, and I was return with a "[Object NodeList]".

How can I retrieve the individual value(s) base on the checkbox that the user has selected? For example, if user has selected "apple", I want to retrieve the value "apple". But if the user has selected "apple" and "Orange", I want to retrieve the value "apple" and "orange".

UPDATE

Thank you everyone for your comments and sample codes. I have edited the code below to retrieve the user-selected checkbox.

HTML:

<form id="product_form">
  <div class="row" id="row1">
      <div class="col-8">
          <label><strong>FoodCategory:</strong></label>
          <select id="model" name="model" onchange="populate(this.id, 'food')">
              <option value="select">--Select Category--</option>
              <option value="Fruit">Fruit</option>
              <option value="vegetable">Vegetable</option>
          </select>
      </div>
      <div class="col-8">
          <label><strong>Outcome:</strong></label>
          <div id="food"></div>
      </div>
  </div>
</form>
<button onclick="getResult()">Get Result</button>

Javascript:

var mappingData = {
    "fruit": {
      "destination": ["Apple", "Orage"]
    },
    "vegetable": {
      "destination": ["Cabbage", "Carrot"]
    }
  };
  
  function populate(model, food) {
    var mod = document.getElementById('model');
    var scenario = document.getElementById('food');
    scenario.innerHTML = "";
    mappingData[mod.value].destination.forEach(function(item) {
      createCheckBox(item, scenario)
    });
  }
  
  function createCheckBox(value, parent) {
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = "food";
    checkbox.value = value;
  
    var label = document.createElement('label')
    label.htmlFor = value;
    label.appendChild(document.createTextNode(value));
  
    parent.appendChild(checkbox)
    parent.appendChild(label)
    parent.appendChild(document.createElement("br"))
  }

function getResult() {
    let checkboxes = document.querySelectorAll('input[name="food"]:checked');
    let values = [];
    checkboxes.forEach((checkbox) => {
        values.push(checkbox.value)
    });
    alert(values);
}

Answer 1

Write this code when all javascript code done...

<script> 
if (document.getElementById('youid').checked) {
        alert(document.getElementById('youid').value);
    }</script>

Answer 2

Assuming you have an attribute to select those checkboxes, this code would work:

 function do_submit(form) { var result = []; var checkboxes = form.querySelectorAll(".my-checkbox").forEach(function(elem) { if (elem.checked) { result.push(elem.value); } }); form.querySelector("[name=chekboxes]").value = result.join(","); // to cancel: return false // to submit: // form.submit(); }

 <form onsubmit="return do_submit(this); "> <label><input type="checkbox" class="my-checkbox" value="apple"> apple </label><br> <label><input type="checkbox" class="my-checkbox" value="banana"> banana </label><br> <label><input type="checkbox" class="my-checkbox" value="cabbage"> cabbage </label><br> <:-- should be hidden: --> <input type="text" name="chekboxes" value=""> <input type="submit"> </form>