Getting array of selected checkbox attributes [duplicate]

Question

In the web application I'm currently working on there are a lot of places where I have many HTML checkboxes that I need to turn into a JS array of selected items. For example:

<input type="checkbox" class="example" data-item="3">
<input type="checkbox" class="example" data-item="5">
<input type="checkbox" class="example" data-item="7">
<input type="checkbox" class="example" data-item="11">

Then I have a lot of logic like this to pack the selected values into an array:

var items = [];
$('.example[data-item]:checked').each(function (_, e) {
    items.push(Number($(e).data('item')));
});

My question is just this: Is there some nice way to do this in a one-liner (jQuery is allowed if needed), e.g.:

var items = /* magic */;

I realize I could write a function for this, and I will if there is no way to do it clearly otherwise, but I'm looking for some built-in JS magic that can do it all at once.

For completeness here's a snippet:

$('#button').click(function () {
  var items = [];
  $('.example[data-item]:checked').each(function (_, e) {
    items.push(Number($(e).data('item')));
  });
  alert(JSON.stringify(items));
});

label { display: flex; align-items: center; }
div { display: inline-flex; flex-direction: column; }
button { margin: 1ex; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" class="example" data-item="3"> Item 3</label>
<label><input type="checkbox" class="example" data-item="5"> Item 5</label>
<label><input type="checkbox" class="example" data-item="7"> Item 7</label>
<label><input type="checkbox" class="example" data-item="11"> Item 11</label>
<label><input type="checkbox" class="example" data-item="13"> Item 13</label>
<label><input type="checkbox" class="example" data-item="17"> Item 17</label>
<label><input type="checkbox" class="example" data-item="19"> Item 19</label>
<button id="button">Click Me</button>
</div>

api.jquery.com/jquery.map var items = $('.example[data-item]:checked').map(function() { return Number($(this).data('item')); }).get(); — Satpal
– Satpal, Commented Jul 17, 2017 at 13:42
@Jason ... Check this fiddle jsfiddle.net/russcam/NxATD .. Source is stackoverflow.com/questions/6166763/… — Shiladitya
– Shiladitya, Commented Jul 17, 2017 at 13:43

Ionut Necula · Accepted Answer · 2017-07-17 13:46:26Z

2

I don't see anything wrong with your code but another way could be to use map() and return what you need:

$('#button').click(function() {
  var items = $(".example[data-item]:checked").map(function() {
    return $(this).data('item');
  }).get();
  console.log(items);
});

label {
  display: flex;
  align-items: center;
}

div {
  display: inline-flex;
  flex-direction: column;
}

button {
  margin: 1ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" class="example" data-item="3"> Item 3</label>
  <label><input type="checkbox" class="example" data-item="5"> Item 5</label>
  <label><input type="checkbox" class="example" data-item="7"> Item 7</label>
  <label><input type="checkbox" class="example" data-item="11"> Item 11</label>
  <label><input type="checkbox" class="example" data-item="13"> Item 13</label>
  <label><input type="checkbox" class="example" data-item="17"> Item 17</label>
  <label><input type="checkbox" class="example" data-item="19"> Item 19</label>
  <button id="button">Click Me</button>
</div>

answered Jul 17, 2017 at 13:46

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

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

1 Comment

Jason C Over a year ago

Awesome, and I made it even shorter with var items = $.map($('.example[data-item]:checked'), (e) => +e.dataset.item); (Just discovered the + trick from jquery multiple checkboxes array).

Himanshu Upadhyay · Accepted Answer · 2017-07-17 13:42:25Z

1

Yes you can use map function:

var tempValue=$('input:checkbox').map(function(n){
          if(this.checked){
                return  this.value;
              };
       }).get().join(',');
   console.log(tempValue);

answered Jul 17, 2017 at 13:42

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

Comments

Avraam Mavridis · Accepted Answer · 2017-07-17 13:47:34Z

1

const checkedItems = Array.from(document.querySelectorAll('[checked]')).reduce((items, el) => {
   // save whatever you want from the elmenent here
   items = items.concat(el)
   return items;
}, [])

answered Jul 17, 2017 at 13:47

Avraam Mavridis

8,97023 gold badges88 silver badges136 bronze badges

Collectives™ on Stack Overflow

Getting array of selected checkbox attributes [duplicate]

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related