How do I retrieve the value from a checkbox that was created from a Javascript?-CodePudding

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  id="row1">
      <div >
          <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 >
          <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);
}

CodePudding user response：

Write this code when all javascript code done...

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

CodePudding user response：

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"  value="apple"> apple </label><br>
  <label><input type="checkbox"  value="banana"> banana </label><br>
  <label><input type="checkbox"  value="cabbage"> cabbage </label><br>

  <!-- should be hidden: -->
  <input type="text" name="chekboxes" value="">

  <input type="submit">
</form>