从表中选中的复选框中获取所有 id 值

Question

<table id="tab" border='1' style='width:100%'>
        <tr ><td>'hi'</td><td><input type='checkbox' id='1'/></td></tr>
        <tr><td>'hi'</td><td><input type='checkbox' id='2' /></td></tr>
        <tr ><td>'hi'</td><td><input type='checkbox'id='3' /></td></tr>
        <tr ><td>'hi'</td><td><input type='checkbox'id='4' /></td></tr>
</table>

this is example code, i need to return list of if that are checked, so if i check all of them i get lit[1,2,3,4] if i select only fist 2 list[1,2] and so on. Please help me!

Answer 1

Try this:

var list=[]
$("#tab :checked").each(function(i,e){
  list.push($(this).attr("id"))
})

Answer 2

Find all the checkbox elements and filter those which are checked.

 const checkedCheckboxes = Array.from(document.querySelectorAll('input[type=checkbox]')).filter(checkbox => checkbox.checked) console.log(checkedCheckboxes)

 <table id="tab" border='1' style='width:100%'> <tr> <td>'hi'</td> <td><input type='checkbox' id='1' /></td> </tr> <tr> <td>'hi'</td> <td><input type='checkbox' id='2' /></td> </tr> <tr> <td>'hi'</td> <td><input type='checkbox' id='3' /></td> </tr> <tr> <td>'hi'</td> <td><input type='checkbox' id='4' /></td> </tr> </table>

Answer 3

You should be assigning a value to each checkbox instead. Please do not use the ID attribute to store data.

When you are ready to grab the IDs, reference the value of the field.

 document.querySelector('.btn-disp').addEventListener('click', e => { const ids = [...document.getElementById('tab').querySelectorAll('td input[type="checkbox"]:checked')].map(cb => cb.value); console.log(`Selected IDs: ${ids.join(', ')}`); });

 body { font-size: 0.75em; } table { width: 100%; } table, td { border: thin solid black; border-collapse: collapse; } td { padding: 0.25em; }.as-console-wrapper { max-height: 2em;important; }

 <table id="tab"> <tr> <td>Item #1</td> <td><input type="checkbox" value="1" /></td> </tr> <tr> <td>Item #2</td> <td><input type="checkbox" value="2" /></td> </tr> <tr> <td>Item #3</td> <td><input type="checkbox" value="3" /></td> </tr> <tr> <td>Item #4</td> <td><input type="checkbox" value="4" /></td> </tr> </table> <br /> <button class="btn-disp">Display Selected IDs</button>