Get values of all checked boxes in input type checkbox in javascript

Question

I have made a function to get the values of checked boxes and placing all values in an input field. But i am getting problem in the result in which i want to remove the last comma. I have tried slice but could not succeded. Please help me out.

<!DOCTYPE html>
<html>
<body>

<p>How would you like your coffee?</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>

<script>
function myFunction() {
  var coffee = document.forms["myform"];
  var txt = "";
  var i;
  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt + coffee[i].value + ", ";

    }
  }
  document.getElementById("order").value = "You ordered a coffee with: " + txt;
}
</script>

</body>
</html>

Consider using map instead of the for loop, and then use join. — evolutionxbox
– evolutionxbox, Commented Jan 22, 2020 at 10:27

Fabrizio Calderan · Accepted Answer · 2020-01-22 10:34:24Z

1

Use an array, push the values inside the for loop, then use join()

var txt = [];
var i;
for (i = 0; i < coffee.length; i++) {
  if (coffee[i].checked) {
    txt.push(coffee[i].value);
  }
}
document.getElementById("order").value = "You ordered a coffee with: " + txt.join(', ');

As a side note, with querySelectorAll() you could select only the checked chekboxes, without using a condition inside the loop:

var coffee = [...document.querySelectorAll('[name="myform"] input:checked')];
var i, txt = [];

for (i = 0; i < coffee.length; i++) {
    txt.push(coffee[i].value);
}
document.getElementById("order").value = "You ordered a coffee with: " + txt.join(', ');

edited Jan 22, 2020 at 10:34

answered Jan 22, 2020 at 10:24

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user8611412 · Accepted Answer · 2020-01-22 10:25:07Z

0

If you know for sure that txt will always have a comma at the end and you want to use slice you could run txt = txt.slice(0,-2). The -2 is because you have ", " which is two characters. but the array answer is a better approach.

answered Jan 22, 2020 at 10:25

user8611412

Comments

Merci Dieu KIMPOLO · Accepted Answer · 2020-01-22 10:27:55Z

0

function myFunction() {
  var coffee = document.forms["myform"];
  var txt = "";
  var i;
  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt + coffee[i].value + ", ";

    }
  }
  document.getElementById("order").value = "You ordered a coffee with: " +txt.substring(0, txt.length - 1);

}

answered Jan 22, 2020 at 10:27

Merci Dieu KIMPOLO

4433 silver badges10 bronze badges

Collectives™ on Stack Overflow

Get values of all checked boxes in input type checkbox in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related