Getting all selected checkboxes in an array

Question

So I have these checkboxes:

And so on. There are about 6 of them and are hand-coded (i.e not fetched from a db) so they are likely to remain the same for a while.

My question is how I can get them all in an array (in javascript), so I can use them while making an AJAX $.post request using Jquery.

Any thoughts?

Edit: I would only want the selected checkboxes to be added to the array

ybo_60556 · Answer

Formatted :

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

Hopefully, it will work.

Barbaros_Alp_51734 · Answer

I didnt test it but it should work

user_1064477 · Answer

Pure JavaScript with no need for temporary variables:

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked"), e => e.value);

user_24587 · Answer

This should do the trick:

$('input:checked');

I don't think you've got other elements that can be checked, but if you do, you'd have to make it more specific:

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');

user_1671320 · Answer

Another way of doing this with vanilla JS in modern browsers (no IE support, and sadly no iOS Safari support at the time of writing) is with FormData.getAll():

var formdata   = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question

// allchecked is ["1","3","4","5"]  -- if indeed all are checked

user_714574 · Answer

On checking add the value for checkbox and on dechecking subtract the value

$('#myDiv').change(function() {
  var values = 0.00;
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values=values+parseFloat(($(this).val()));
      // }
    });
    console.log( parseFloat(values));
  }
});

user_12900473 · Answer

Array.from($(".yourclassname:checked"), a => a.value);

user_5689349 · Answer

Select Checkbox by input name

var category_id = [];

$.each($("input[name='yourClass[]']:checked"), function(){                    
    category_id.push($(this).val());
});

user_8068543 · Answer

function selectedValues(ele){
  var arr = [];
  for(var i = 0; i < ele.length; i++){
    if(ele[i].type == 'checkbox' && ele[i].checked){
      arr.push(ele[i].value);
    }
  }
  return arr;
}

user_1878667 · Answer

var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });

user_5783617 · Answer

Use below code to get all checked values

        var yourArray=[];
        $("input[name='ordercheckbox']:checked").each(function(){
            yourArray.push($(this).val());
        });
        console.log(yourArray);

user_6336221 · Answer

Use commented if block to prevent add values which has already in array if you use button click or something to run the insertion

$('#myDiv').change(function() {
  var values = [];
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values.push($(this).val());
      // }
    });
    console.log(values);
  }
});

user_8706420 · Answer

here is my code for the same problem someone can also try this. jquery

user_11203358 · Answer

can use this function that I created

function getCheckBoxArrayValue(nameInput){
    let valores = [];
    let checked = document.querySelectorAll('input[name="'+nameInput+'"]:checked');
    checked.forEach(input => {
        let valor = input?.defaultValue || input?.value;
        valores.push(valor);
    });
    return(valores);
}

to use it just call it that way

getCheckBoxArrayValue("type");

user_11072051 · Answer

 var idsComenzi = [];

    $('input:checked').each(function(){
        idsComenzi.push($(this).val());
    });

user_2054977 · Answer

Just adding my two cents, in case it helps someone :

const data = $checkboxes.filter(':checked').toArray().map((item) => item.value);

I already had a jQuery object, so I wouldn't select all my checkbox another time, that's why I used jQuery's filter method. Then I convert it to a JS array, and I map the array to return items'value.

user_5372008 · Answer

This is an old question but in 2022 There is a better way to implement it using vanilla JS

We don't need react or fancy frameworks.

We just need handle two onchange events like this:

const types = [{id:1, name:'1'}, {id:2, name:'2'}, {id:3, name:'3'}, {id:4, name:'4'}, {id:5, name:'5'}, {id:6, name:'6'}]

const all = document.getElementById('select-all')
const summary = document.querySelector('p')

let selected = new Set()

const onCheck = event => {
  event.target.checked ? selected.add(event.target.value) : selected.delete(event.target.value)
  summary.textContent = `[${[...selected].join(', ')} | size: ${selected.size}] types selected.`
  all.checked = selected.size === types.length
}

const createCBInput = t => {
  const ol = document.querySelector('ol')
  const li = document.createElement('li')
  const input = document.createElement('input')
  input.type = 'checkbox'
  input.id = t.id
  input.name = 'type'
  input.value = t.id
  input.checked = selected.has(t.id)
  input.onchange = onCheck
  const label = document.createElement('label')
  label.htmlFor = t.id
  label.textContent = t.name

  li.append(input, label)
  ol.appendChild(li)
}

const onSelectAll = event => {
  const checked = event.target.checked
  for (const t of types) {
    const cb = document.getElementById(t.id)
    cb.checked = checked ? true : selected.has(t.id)
    const event = new Event('change')
    cb.dispatchEvent(event)
  }
}

all.checked = selected.size === types.length
all.onchange = onSelectAll

for (const t of types) {
  createCBInput(t)
}

ol {
  list-style-type: none;
  padding-left: 0;
}


  
    
    Select all

Getting all selected checkboxes in an array

27 Answers