获取复选框选择的值

Question

I have multiple checkboxes that get generated by a php code and the HTML looks like this:

<input name="checkbox" id="checkbox" value="firstBox" type="checkbox">
<input name="checkbox" id="checkbox" value="secondBox" type="checkbox">

However when I try to get the selected value by the user using below script

document.getElementById('checkbox').value

I always get 'firstBox' even when the secondBox is selected. Please help me solving this

Answer 1

IDs are identifiers for specific elements. Therefore, they must be unique.

An alternative is setting the same name and use the function querySelectorAll to get the checked checkboxes.

Use this selector to get the checked options: [name="checkbox"]:checked

 document.querySelector('#check').addEventListener('click', function() { var checked = Array.from(document.querySelectorAll('[name="checkbox"]:checked')); checked.forEach(function(e) { console.log(e.value); }); }); 

 <input name="checkbox" name="checkbox" value="firstBox" type="checkbox"> <input name="checkbox" name="checkbox" value="secondBox" type="checkbox"> <button id='check'>Check</button> 

Answer 2

IDs must be unique.

<input name="checkbox" id="checkbox1" value="firstBox" type="checkbox">
<input name="checkbox" id="checkbox2" value="secondBox" type="checkbox">

Get value of first checkbox:

document.getElementById('checkbox1').value

Get value of second checkbox

document.getElementById('checkbox2').value