如何获取AJAX响应动态生成的选中复选框的ID

问题根因 #

你使用内联onclick="loadTweets()"的方式绑定事件时，函数内部的this默认指向window对象，不是当前触发点击的复选框元素，因此无法直接获取到复选框的ID属性。

解决方案 #

方案1：快速修复原有写法 #

修改内联调用逻辑，把当前触发事件的元素作为参数传入函数：

1. 修改动态生成复选框的代码，把onclick="loadTweets()"改为onclick="loadTweets(this)"
2. 调整loadTweets函数接收参数：

function loadTweets(checkboxElem){
    var val = checkboxElem.checked ? checkboxElem.id : '';
    alert(val);
    // 如需一次性获取所有选中的复选框ID，可增加下方逻辑
    // let allCheckedIds = []
    // $('input[name="merchantName[]"]:checked').each(function(){
    //   allCheckedIds.push(this.id)
    // })
    // console.log(allCheckedIds)
}

方案2（更推荐）：使用jQuery事件委托 #

移除内联onclick属性，通过事件委托绑定动态生成元素的事件，后续维护更简便：

1. 删除动态生成复选框代码里的onclick="loadTweets()"属性
2. 在全局script中新增事件委托绑定代码，无需放在keyup回调内部：

// 委托给页面初始就存在的父元素#sparepartList，匹配所有对应复选框的点击事件
$('#sparepartList').on('click', 'input[name="merchantName[]"]', function(){
    const val = this.checked ? this.id : ''
    alert(val)
    // 批量获取所有选中ID的逻辑同上
})

内容的提问来源于stack exchange，提问作者Ritika