Get checked checkbox value by for each funtion in javascript

Question

I am not getting the checked checkbox value when using for each function of javascript. When i check a checkbox value is not coming from that function.

function myFunction() {
  var coffee = document.querySelectorAll("[name = coffee]:checked");
  coffee.forEach(myfunction);
  alert(coffee);

  function myfunction(txt) {
    document.getElementById("order").value += txt;
  }
}
// To remove the last comma we can use txt.slice(0,-2). We used -2 because there are two characters ", " which is comma and space.

<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="100">With cream<br>
  <input type="checkbox" name="coffee" value="150">With sugar<br>
  <input type="checkbox" name="coffee" value="200">With milk<br>
  <input type="checkbox" name="coffee" value="250">With tea<br>
  <br>
  <input type="button" onclick="myFunction()" value="Send order">
  <br><br>
  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>

Each checkbox must have a distinct name, yours are all the same — Mikkel, Jan 23 '20 at 07:29

CertainPerformance · Answer 1 · 2020-01-23T07:36:39.310

Each element matching document.querySelectorAll("[name = coffee]:checked"); is an element, not a number, so assigning it to the .value of an input will result in concatenating the string representation of the element (which is HTMLInputElement). That's not what you want. Access the .value of the input instead
+ will concatenate when either operand is a string, and .value returns a string. Cast each value to number, and add to a different number, then assign to the order element at the end:

function myFunction() {
  var coffee = document.querySelectorAll("[name = coffee]:checked");
  let sum = 0;
  coffee.forEach(myfunction);
  function myfunction(input) {
    sum += Number(input.value);
  }
  document.getElementById("order").value = sum;
}
// To remove the last comma we can use txt.slice(0,-2). We used -2 because there are two characters ", " which is comma and space.

<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="100">With cream<br>
  <input type="checkbox" name="coffee" value="150">With sugar<br>
  <input type="checkbox" name="coffee" value="200">With milk<br>
  <input type="checkbox" name="coffee" value="250">With tea<br>
  <br>
  <input type="button" onclick="myFunction()" value="Send order">
  <br><br>
  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>

More elegantly, use .reduce to sum up the prices, and avoid inline handlers - they have far too many issues, attach listeners properly using Javascript instead:

document.querySelector('input[type="button"]').addEventListener('click', () => {
  const sum = [...document.querySelectorAll("[name = coffee]:checked")]
    .reduce((a, input) => a + Number(input.value), 0);
  document.getElementById("order").value = sum;
});

<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="100">With cream<br>
  <input type="checkbox" name="coffee" value="150">With sugar<br>
  <input type="checkbox" name="coffee" value="200">With milk<br>
  <input type="checkbox" name="coffee" value="250">With tea<br>
  <br>
  <input type="button" value="Send order">
  <br><br>
  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>

Even more elegantly, use labels for the With texts, so that clicking on that text results in toggling the associated input:

document.querySelector('input[type="button"]').addEventListener('click', () => {
  const sum = [...document.querySelectorAll("[name = coffee]:checked")]
    .reduce((a, input) => a + Number(input.value), 0);
  document.getElementById("order").value = sum;
});

<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <label><input type="checkbox" name="coffee" value="100">With cream</label><br>
  <label><input type="checkbox" name="coffee" value="150">With sugar</label><br>
  <label><input type="checkbox" name="coffee" value="200">With milk</label><br>
  <label><input type="checkbox" name="coffee" value="250">With tea</label><br>
  <br>
  <input type="button" value="Send order">
  <br><br>
  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>

You could also consider using a change listener so that the current sum is displayed immediately, rather than after a click.

score 0 · Answer 2 · answered Jan 23 '20 at 07:40

You can retrieve checked checkboxes values with the following

I have created a variable that is used to store the selected checkboxes values and send these values to your input box.

function myFunction() {
 
        var coffee = [];
        $(':checkbox:checked').each(function(i){
          coffee[i] = $(this).val();
        });
    
   document.getElementById("order").value = coffee;

 }
 // To remove the last comma we can use txt.slice(0,-2). We used -2 because there are two characters ", " which is comma and space.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" value="100">With cream<br>
<input type="checkbox" name="coffee" value="150">With sugar<br>
<input type="checkbox" name="coffee" value="200">With milk<br>
<input type="checkbox" name="coffee" value="250">With tea<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<br><br>
<input type="text" id="order" size="50">
<input type="submit" value="Submit">
</form>




</body>
</html>

Get checked checkbox value by for each funtion in javascript

2 Answers2