Estoy tratando de obtener el atributo de data-region-code de todas las casillas de verificación que se cambiaron (marcadas/sin marcar). Pero con mi código, obtengo la última casilla de verificación modificada, no todas las casillas de verificación. Por ejemplo: si estoy cambiando la casilla de verificación para data-region-code 001, 002, 003, 004 , obtendré el valor como 004 , ya que es la última casilla de verificación modificada.
Como referencia: cuando se cambia la casilla de verificación, agrego class=changed para input .
Estructura (tengo más tr , tal vez alrededor de 18-20 con la misma estructura):
<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>Código:
let regCodeAllRegions = []; regCodeAllRegions = $('.settings-container').find('input:checkbox.changed').attr('data-region-code'); alert(JSON.stringify(regionCode));El método attr solo funciona para un solo elemento, por lo que devuelve solo el último. Necesita iterar a través de la lista. Esto es un ejemplo:
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">De otra manera:
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">