Getting all selected checkboxes in an array

Question

So I have these checkboxes    lt input type  checkbox  name  type  value  4    gt   lt input type  checkbox  name  type  value  3    gt   lt input type  checkbox  name  type  value  1    gt   lt input type  checkbox  name  type  value  5    gt    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

User · Answer

ES6 version   const values   Array    from document querySelectorAll  input type  checkbox         filter  checkbox    gt  checkbox checked     map  checkbox    gt  checkbox value      x000D   x000D  function getCheckedValues     x000D    return Array from document querySelectorAll  input type  checkbox      x000D     filter  checkbox    gt  checkbox checked  x000D     map  checkbox    gt  checkbox value   x000D    x000D   x000D  const resultEl   document getElementById  result    x000D   x000D  document getElementById  showResult   addEventListener  click        gt    x000D    resultEl innerHTML   getCheckedValues    x000D      x000D   lt input type  checkbox  name  type  value  1    gt 1 x000D   lt input type  checkbox  name  type  value  2    gt 2 x000D   lt input type  checkbox  name  type  value  3    gt 3 x000D   lt input type  checkbox  name  type  value  4    gt 4 x000D   lt input type  checkbox  name  type  value  5    gt 5 x000D   x000D   lt br gt  lt br gt  x000D   lt button id  showResult  gt Show checked values lt  button gt  x000D   lt br gt  lt br gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

User · Answer

var checkedValues      input checkbox vdrSelected checked   map function              return this value         get

User · Answer

If you want to use a vanilla JS  you can do it similarly to a  zahid-ullah  but avoiding a loop     var values      filter call document getElementsByName  fruits      function c        return c checked       map function c        return c value          The same code in ES6 looks a way better   var values      filter call document getElementsByName  fruits       c    gt  c checked  map c   gt  c value      x000D   x000D  window serialize   function serialize     x000D    var values      filter call document getElementsByName  fruits      function c    x000D      return c checked  x000D       map function c    x000D      return c value  x000D        x000D    document getElementById  serialized   innerText   JSON stringify values   x000D    x000D  label   x000D    display  block  x000D    x000D   lt label gt  x000D     lt input type  checkbox  name  fruits    value  banana  gt Banana x000D   lt  label gt  x000D   lt label gt  x000D     lt input type  checkbox  name  fruits    value  apple  gt Apple x000D   lt  label gt  x000D   lt label gt  x000D     lt input type  checkbox  name  fruits    value  peach  gt Peach x000D   lt  label gt  x000D   lt label gt  x000D     lt input type  checkbox  name  fruits    value  orange  gt Orange x000D   lt  label gt  x000D   lt label gt  x000D     lt input type  checkbox  name  fruits    value  strawberry  gt Strawberry x000D   lt  label gt  x000D   lt button onclick  serialize    gt Serialize x000D   lt  button gt  x000D   lt div id  serialized  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Pure JS  For those who don t want to use jQuery  var array      var checkboxes   document querySelectorAll  input type checkbox  checked    for  var i   0  i  lt  checkboxes length  i        array push checkboxes i  value

User · Answer

x000D   x000D  function selectedValues ele   x000D    var arr       x000D    for var i   0  i  lt  ele length  i     x000D      if ele i  type     checkbox   amp  amp  ele i  checked   x000D        arr push ele i  value   x000D        x000D      x000D    return arr  x000D    x000D   x000D   x000D

User · Answer

Using Jquery   You only need to add class to every input  i have add class  source  you can change it of course   lt input class  source  type  checkbox  name  type  value  4    gt   lt input class  source  type  checkbox  name  type  value  3    gt   lt input class  source  type  checkbox  name  type  value  1    gt   lt input class  source  type  checkbox  name  type  value  5    gt    lt script type  text javascript  gt    document  ready function         var selected value          initialize empty array          source checked   each function            selected value push   this  val                 console log selected value     Press F12 to see all selected values      lt  script gt

User · Answer

You could try something like this      input type  checkbox     change function           var checkedValue      input checkbox checked   map function                    return this value                 get                         alert checkedValue       display selected checkbox value            Here     input type  checkbox     change function   call when any checkbox checked or unchecked  after this    input checkbox checked   map function    looping on all checkbox

User · 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 · Answer

Pure JavaScript with no need for temporary variables   Array from document querySelectorAll  input type checkbox  name type  checked    map e   gt  e value

User · Answer

var chk arr    document getElementsByName  chkRights      var chklength   chk arr length                for k 0 k lt  chklength k          chk arr k  checked   false

User · Answer

I didnt test it but it should work   lt script type  text javascript  gt  var selected   new Array       document  ready function           input checkbox name type  checked   each function            selected push   this  val                  lt  script gt

User · Answer

In MooTools 1 3  latest at the time of writing    var array           input type checkbox  checked   each function i       array push  i value

User · Answer

On checking add the value for checkbox and on dechecking subtract the value   x000D   x000D      myDiv   change function     x000D    var values   0 00  x000D      x000D          myDiv  checked   each function     x000D          if values indexOf   this  val        -1   x000D        values values parseFloat    this  val      x000D             x000D          x000D      console log  parseFloat values    x000D      x000D      x000D   lt div id  myDiv  gt  x000D     lt input type  checkbox  name  type  value  4 00    gt  x000D     lt input type  checkbox  name  type  value  3 75    gt  x000D     lt input type  checkbox  name  type  value  1 25    gt  x000D     lt input type  checkbox  name  type  value  5 50    gt  x000D   lt  div gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Formatted       input checkbox name type  checked   each function        yourArray push   this  val           Hopefully  it will work

User · Answer

here is my code for the same problem someone can also try this  jquery   lt script gt    document  ready function         check11   change function    var favorite1                 each    input name  check1   checked    function                        favorite1 push   this  val     document getElementById  countch1   innerHTML favorite1               lt  script gt

User · Answer

Use this   var arr      input checkbox checked   map function        return this value     get

User · Answer

var array             input checkbox name type  checked   each function            array push   this  val

User · 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    x000D   x000D      myDiv   change function     x000D    var values       x000D      x000D          myDiv  checked   each function     x000D          if values indexOf   this  val        -1   x000D        values push   this  val     x000D             x000D          x000D      console log values   x000D      x000D      x000D   lt div id  myDiv  gt  x000D     lt input type  checkbox  name  type  value  4    gt  x000D     lt input type  checkbox  name  type  value  3    gt  x000D     lt input type  checkbox  name  type  value  1    gt  x000D     lt input type  checkbox  name  type  value  5    gt  x000D   lt  div gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · 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 · Answer

In Javascript it would be like this  Demo Link       get selected checkboxes function getSelectedChbox frm      var selchbox         array that will store the value of selected checkboxes      gets all the input tags in frm  and their number   var inpfields   frm getElementsByTagName  input      var nr inpfields   inpfields length       traverse the inpfields elements  and adds the value of selected  checked  checkbox in selchbox   for var i 0  i lt nr inpfields  i          if inpfields i  type     checkbox   amp  amp  inpfields i  checked    true  selchbox push inpfields i  value         return selchbox

[javascript] Getting all selected checkboxes in an array

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to dhtml