How to push checked checkboxes values into an array?

Question

I'd like to push checked checkboxes values into an array, but I'm having some issue because each time I try to add it into the array it stays empty, I am probably doing something wrong but can't figure out what.

http://jsfiddle.net/fx7su2rp/689/

HTML :

<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Jquery :

$(document).ready(function () {

  var tmp = [];

  $("input").each(function() {
    if ($(this).is(':checked')) {
      var checked = ($(this).val());
      tmp.push(checked);
    }
  });

  $('#button').on('click', function () {
        alert(tmp);
  });

});

What am I doing wrong ?

Are you deliberately not allowing values to be removed from the array, or is that your next step? — David Thomas
– David Thomas, Commented May 14, 2017 at 9:22
@DavidThomas If the user removes a value I'll update it onto the array when submiting — Horai Nuri
– Horai Nuri, Commented May 14, 2017 at 9:25

Victor · Accepted Answer · 2017-05-14 09:38:00Z

5

You are not invoking checkbox change event. Use this:

$("input[name='checkbox']").change(function() {
  var checked = $(this).val();
  if ($(this).is(':checked')) {
    tmp.push(checked);
  } else {
    tmp.splice($.inArray(checked, tmp),1);
  }
});

http://jsfiddle.net/fx7su2rp/694/

edited May 14, 2017 at 9:38

Victor

14.7k24 gold badges87 silver badges158 bronze badges

answered May 14, 2017 at 9:21

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

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

2 Comments

Kiran Over a year ago

@Lindow, For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse. For more info. click on link which is shared.

Horai Nuri Over a year ago

I see, I just saw a little problem, probably because I didn't mention it but how can I update my checkboxes when the user uncheck a value ?

Victor · Accepted Answer · 2017-05-14 09:39:55Z

3

You are verifying if they are checked at the beginning (when none is checked) so this is why you get that empty array.

You should be handling clicks on the inputs in order to update the array. Check this out.

$(document).ready(function () {

  var tmp = [];

  $("input").click(function() {
    if ($(this).is(':checked')) {
      var checked = ($(this).val());
      tmp.push(checked);
    } else {
      tmp.splice($.inArray(checked, tmp),1);
    }
  });

  $('#button').on('click', function () {
        alert(tmp);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Notice the $('input').click() there.

edited May 14, 2017 at 9:39

answered May 14, 2017 at 9:22

Victor

14.7k24 gold badges87 silver badges158 bronze badges

1 Comment

ibrahim mahrir Over a year ago

What if the user clicks a checkbox 2 or more times?

taile · Accepted Answer · 2017-05-14 09:21:44Z

You need to handle checked event of each checkbox.

So that you can push it into array For more detail, you can see here

$(document).ready(function () {

  var tmp = [];
  
  $("input").each(function() {
    $(this).change(function() {
    if(this.checked) {
      tmp.push(this.checked);
    }
});})
 
  $('#button').on('click', function () {
		alert(tmp);
    console.log(tmp);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Gustav P Svensson · Accepted Answer · 2017-05-14 09:26:04Z

1

Either you can do on change as the other sais, but it's more effective to only run the code when the user presses the button, so make a function and call that function when the user presses the button:

http://jsfiddle.net/fx7su2rp/693/

$(document).ready(function () {


  $('#button').on('click', function () {
        alert(check_boxes());
  });

});

function check_boxes() {
var tmp = [];
  $("input").each(function() {
    if ($(this).is(':checked')) {
      var checked = ($(this).val());
      tmp.push(checked);
    }
  });
  return tmp;
}

answered May 14, 2017 at 9:26

Gustav P Svensson

5276 silver badges15 bronze badges

Comments

Ataur Rahman Munna · Accepted Answer · 2017-05-14 09:33:07Z

1

Add a click function on your checkbox and each click, if checked, then push the value in tmp variable.

  $('#button').on('click', function () {
  var tmp = [];
      $("input").each(function() {
          if ($(this).is(':checked')) {
          var checked = ($(this).val());
          tmp.push(checked);
        }
      });
  alert(tmp);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

edited May 14, 2017 at 9:33

answered May 14, 2017 at 9:25

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

Comments

JJWesterkamp · Accepted Answer · 2017-05-14 12:31:53Z

As other answers already suggested, you have to update your values array anytime a change event occurs on any checkbox you wish to monitor.

Other answers work just fine, but I thought I'd post a more plain javascript answer. I think this is a bit cleaner and more expressive than a jQuery .each() loop, and saves us from querying values in, pushing into, and splicing from an intermediate array manually.

Let's create a regular array containing your checkboxes called checkboxesArray in addition to the jQuery collection, and filter then map that array in our change handler:

$(document).ready(function () {

  let $checkboxes = $('[name="checkbox"]');
  let checkboxesArray = [].slice.call($checkboxes);
  let $output = $('#output');
  let values = [];
  
  $checkboxes.on('change', () => {
    values = checkboxesArray
      .filter((checkbox) => checkbox.checked)
      .map((checkbox) => checkbox.value);
      
    // Preview:
    $output.append('<div>' + values.join(', ') + '</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

<div id="output"></div>

Md Amranur Rahman · Accepted Answer · 2019-01-29 15:25:31Z

0

This will help you :

$("#button").click(function (e) { 
     var tmp = [];              
     $('.tmp').each(function(){
     if ($(this).is(':checked')) {
     var checked = ($(this).val());
     tmp.push(checked);
   }
 });
 console.log(tmp);
}

answered Jan 29, 2019 at 15:25

Md Amranur Rahman

1,14317 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to push checked checkboxes values into an array?

7 Answers 7

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related