Getting multiple value of checkbox in jQuery

Question

I'm trying to get the multiple value of my checkbox with the jQuery but with my code I got double value.

If I pick Apple and Manggo and when I submit the form I get value of Apple Apple Manggo.

A lot of tutorial use .click function. Since I have more function I want to use it outside the const submit =() =>{}

How do I fix this multiple value ?

let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
  $('input[name="chk_fruit"]:checked').each(function() {
    fruit_temp.push($(this).val());
  });
});

const submit = () => {
  let formData = new FormData();
  //more formData
  formData.append('Fruit', fruit_temp);

  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
  <label><b>Favourite Fruit</b></label><br>
  <div class="form-group">
    <ul>
      <li><input type="checkbox" name="chk_fruit" value="Apple"> Apple</li>
      <li><input type="checkbox" name="chk_fruit" value="Manggo"> Manggo</li>
      <li><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew</li>
      <li><input type="checkbox" name="chk_fruit" value="Orange"> Orange</li>
    </ul>
    <!-- more form field -->
    <button onclick="submit()">Submit</button>
  </div>
</div>

Clayton Engle · Accepted Answer · 2021-08-31 14:32:27Z

1

When you loop through using .each, you are grabbing all of the values that are currently selected and pushing them into the fruit_temp array. However, you are not resetting the value of fruit_temp, so you are pushing more and more with each checkbox. All you you need to do is clear the array with each change:

let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
  fruit_temp = [];
  $('input[name="chk_fruit"]:checked').each(function() {
    fruit_temp.push($(this).val());
  });
});

answered Aug 31, 2021 at 14:32

Clayton Engle

5914 silver badges17 bronze badges

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

4 Comments

Clayton Engle Over a year ago

As a side note, you seem new to jQuery. Look into wrapping your code in $(document).ready(function() { // code here });. This will let the browser build the page and locate all of the elements and their properties before trying to attach the .change events to them.

nonutt Over a year ago

your explanation is great! thank you. I understood better now

nonutt Over a year ago

yup you are right I new to jQuery I'm still learning :) yup I already have the $(document).ready(function() { // code here }); thnk you for reminding :)

Clayton Engle Over a year ago

Happy to help. :)

Abhilash Augustine · Accepted Answer · 2021-08-31 14:30:42Z

1

let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
  fruit_temp = []; // reset your variable before adding another checked items
  $('input[name="chk_fruit"]:checked').each(function() {
    fruit_temp.push($(this).val());
  });
});

Simply reset your variable before adding latest checked items into your array. fruit_temp = []; on your change event will do the work.

answered Aug 31, 2021 at 14:30

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Collectives™ on Stack Overflow

Getting multiple value of checkbox in jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related