獲取選中的動態生成復選框的ID

Question

假設我有x個復選框：

<input type="checkbox" id="ams" value="False">
<input type="checkbox" id="lon" value="False">
<input type="checkbox" id="ber" value="False">
<input type="checkbox" id="par" value="False">

我想按一下按鈕：

<button type="submit_cities" id="submit_cities">Print selected cities</button>

打印所選復選框的ID。 有辦法解決嗎？ 謝謝！

Answer 1

在下面查看我的解決方案。

 const checkboxes = [ ...document.querySelectorAll('input[type="checkbox"]') ] const submitButton = document.querySelector('#submit_cities') const getCheckedIDs = () => checkboxes .filter(checkbox => checkbox.checked) .map(checkbox => checkbox.getAttribute('id')) submitButton.onclick = () => { console.log(getCheckedIDs()) } 

 <input type="checkbox" id="ams" value="False"> <input type="checkbox" id="lon" value="False"> <input type="checkbox" id="ber" value="False"> <input type="checkbox" id="par" value="False"> <button type="submit_cities" id="submit_cities">Print selected cities</button> 

Answer 2

按鈕的無效類型.so更改為type="button" 。您可以使用Jquery#filter ， Jquery#map和.get() api

並將.on()專門用於動態附加的元素

 $(document).on('click', '#submit_cities', function() { var $arr = $('input[type="checkbox"]').filter((a, b) => $(b).is(':checked')).map((a, b) => $(b).attr('id')).get() console.log($arr) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="ams" value="False"> <input type="checkbox" id="lon" value="False"> <input type="checkbox" id="ber" value="False"> <input type="checkbox" id="par" value="False"> And I'd like upon pressing a button: <button type="button" id="submit_cities">Print selected cities</button> 

Answer 3

使用按鈕的ID添加clickhandler，然后循環遍歷所選輸入：

 $("#submit_cities").click(function() { $('input:checked').each((_, elm) => console.log(elm.id)); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="ams" value="False"> <input type="checkbox" id="lon" value="False"> <input type="checkbox" id="ber" value="False"> <input type="checkbox" id="par" value="False"> <button type="submit_cities" id="submit_cities">Print selected cities</button> 

Answer 4

這是我的解決方案：

 function select() { var results=$("input:checkbox:checked"); for (i=0;i< results.length;i++) { alert(results[i].id); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="ams" value="False"> <input type="checkbox" id="lon" value="False"> <input type="checkbox" id="ber" value="False"> <input type="checkbox" id="par" value="False"> <button onclick="select()"> Go </button>