代码之家 › 专栏 › 技术社区 › Pavel Zagalsky

获取选定的动态生成的复选框的ID

html jquery javascript

Pavel Zagalsky · 技术社区 · 6 年前

假设我有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。有办法吗? 谢谢!

3 回复 | 直到 6 年前

The fourth bird 6 年前

使用按钮的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>

lankovova 6 年前

看看下面我的解决方案。

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>

prasanth 6 年前

无效的按钮类型。请更改为 type="button" 你可以用 Jquery#filter , Jquery#map .get() 应用程序编程接口

使用 .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>

The KNVB 6 年前

以下是我的解决方案:

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>