I am trying to get data-region-code attribute from all the checkbox that were changed (checked/unchecked). But with my code, I am getting the last changed checkbox, not all the checkboxes. For eg: If I'm changing checkbox for data-region-code 001, 002, 003, 004, I will get the value as 004 as it is the last changed checkbox.
For reference: when checkbox is changed, I add class=changed for input.
Structure (I have more tr, maybe around 18-20 with same structure):
<table class= settings-container">
<thead></thead>
<tbody>
<tr id="">
<td></td>
<td></td>
<td>
<input type="checkbox" name="blockage_simulation[]" data-region-code="001" id="blockage_simulation" checked="" class="changed">
</td>
</tr>
<tr id="">
<td></td>
<td></td>
<td>
<input type="checkbox" name="blockage_simulation[]" data-region-code="002" id="blockage_simulation" class="changed">
</td>
</tr>
</tbody>
</table>
Code:
let regCodeAllRegions = [];
regCodeAllRegions = $('.settings-container').find('input:checkbox.changed').attr('data-region-code');
alert(JSON.stringify(regionCode));
Method attr only works for a single element, so it returns only the last one. You need to iterate through the list. This is an example:
let regionCodes = [];
$('input:checkbox.changed').each((i, el) => regionCodes.push($(el).data('region-code')));
console.log(regionCodes);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="changed" data-region-code="1">
<input type="checkbox" class="changed" data-region-code="2">
<input type="checkbox" class="changed" data-region-code="3">
<input type="checkbox" class="changed" data-region-code="4">
<input type="checkbox" class="changed" data-region-code="5">Another way:
let regionCodes = $('input:checkbox.changed').toArray().map((el) => $(el).data('region-code'));
console.log(regionCodes);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="changed" data-region-code="1">
<input type="checkbox" class="changed" data-region-code="2">
<input type="checkbox" class="changed" data-region-code="3">
<input type="checkbox" class="changed" data-region-code="4">
<input type="checkbox" class="changed" data-region-code="5">