How can I get all checkbox values via jQuery?

Question

I've following checkboxes:

 <input type="checkbox" id="mc-0" name="trial" value="abc" data-id="z1x"> <input type="checkbox" id="mc-1" name="trial" value="abc" data-id="z2x"> <input type="checkbox" id="mc-2" name="trial" value="abc" data-id="z3x"> <input type="checkbox" id="mc-3" name="trial" value="abc" data-id="z4x"> <input type="checkbox" id="mc-4" name="trial" value="abc" data-id="z5x"> 

I'm looking now for a way to receive all checked checkboxes in a string array or object with jQuery. It needs to look like this if I'm checking the corresponding boxes:

var arr =["z1x", "z5x"]; 

Any idea how to make this working?

Answer 1

You can fetch the checked checkboxes with jQuery using a CSS selector and then use [].map in order to keep the value each has for its data-id attribute:

 var checked = [].map.call($("[id |= 'mc']:checked"), element => element.dataset.id); console.log(checked); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="mc-0" name="trial" value="abc" data-id="z1x" checked> <input type="checkbox" id="mc-1" name="trial" value="abc" data-id="z2x"> <input type="checkbox" id="mc-2" name="trial" value="abc" data-id="z3x"> <input type="checkbox" id="mc-3" name="trial" value="abc" data-id="z4x"> <input type="checkbox" id="mc-4" name="trial" value="abc" data-id="z5x" checked> 

Answer 2

Use :checked in a selector string to select the checked checkboxes, and map them to their data-id value with Array.from 's mapper function:

 document.onclick = () => { const arr = Array.from( document.querySelectorAll('[name=trial]:checked'), checkbox => checkbox.dataset.id ); console.log(arr); }; 

 <input type="checkbox" id="mc-0" name="trial" value="abc" data-id="z1x"> <input type="checkbox" id="mc-1" name="trial" value="abc" data-id="z2x"> <input type="checkbox" id="mc-2" name="trial" value="abc" data-id="z3x"> <input type="checkbox" id="mc-3" name="trial" value="abc" data-id="z4x"> <input type="checkbox" id="mc-4" name="trial" value="abc" data-id="z5x"> 

Answer 3

1. Filter by input with name 'trial': 'input[name:trial]'
2. Filter by whether the input is checked: ':checked'
3. Use JQuery's map function to iterate over all returned elements: $.map( array, func )
4. Replace each element in the array with the id data from each element: (elem) => elem.dataset.id
5. Return the array

 function getChecked() { return $.map($('input[name=trial]:checked'), (elem) => elem.dataset.id ) } $( function() { $('#button').click(() => console.log(getChecked())) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="mc-0" name="trial" value="abc" data-id="z1x"> <input type="checkbox" id="mc-1" name="trial" value="abc" data-id="z2x"> <input type="checkbox" id="mc-2" name="trial" value="abc" data-id="z3x"> <input type="checkbox" id="mc-3" name="trial" value="abc" data-id="z4x"> <input type="checkbox" id="mc-4" name="trial" value="abc" data-id="z5x"> <input type="button" id="button">test</input>