为checkbox元素设置处理程序的最佳方式是使用jQuery创建的

Question

我的网页上有5000张卡片。每张卡片都包含一个复选框。所有的卡片和复选框都是在加载网页时使用jQuery创建的。

''

function createTitleAndToggleButtonInContainer(titleAndToggleContainer, coinData) {
$("<h5></h5>", {
"class": "card-title",
text: coinData.id
}).appendTo(titleAndToggleContainer);

let toggleContainer = $("<div></div>", {
"class": "switch"
});
let input = $("<input>", {
"type": "checkbox",
"name": "toggle",

}).appendTo(toggleContainer);

''

这段代码被调用了5000次。我想为复选框添加一个事件处理程序。如果用户选中了5个以上的复选框，则会显示一个带有卡片ID的模式窗口。我将有一个全局计数器，每次选中复选框时，计数器++。

我需要一种方法来知道哪个复选框被选中了，因为我需要知道它来自卡的ID。用jQuery将事件处理设置为复选框的最佳方法是什么，最重要的是如何知道点击了哪个复选框

感谢的帮助

Answer 1

试试这个：

$("input[type=checkbox]").each(function() {
if($(this).is(':checked')) {
console.log($(this).attr("name"));
}
});

Answer 2

var idCnt =0;
var coinData={id:'supercut'}
var titleAndToggleContainer = document.getElementById("titleAndToggleContainer");

function createTitleAndToggleButtonInContainer(titleAndToggleContainer, coinData) {    
$("<h5></h5>", {
"class": "card-title",
"text": coinData.id +idCnt
}).appendTo(titleAndToggleContainer);

let toggleContainer = $("<div></div>", {
"class": "switch"
}).appendTo(titleAndToggleContainer);    
let input = $("<input>", {
"type": "checkbox",
"name": "toggle",
"onchange":"countChecks()",
}).appendTo(toggleContainer);  

}



for(let i=0;i<10;i++){
idCnt++;

createTitleAndToggleButtonInContainer(titleAndToggleContainer, coinData) ;
}



function countChecks(){
var whichOnes=[];
var cnt = 0;
var checks = document.getElementsByName('toggle')
for(let i = 0;i<checks.length;i++){




if (checks[i].checked){

whichOnes.push(cnt);
}

cnt++;



}
if(whichOnes.length>=5)alert('down the rabbit hole');
console.log(whichOnes)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='titleAndToggleContainer'></div>