Lightning组件中如何获取复选框对应的fName值？

1. 修改模板代码，给复选框绑定对应fName的自定义数据属性 #

在<lightning-input>标签中添加data-fname={fName}，让点击事件能直接关联到对应的文件夹名称：

<template if:true={allFolderNames}>
    <template for:each={allFolderNames} for:item="fName">
        <div key={fName}>
            <div class="container">
                <lightning-layout multiple-rows class="slds-list_horizontal">
                    <lightning-layout-item>
                        <!-- 添加data-fname属性传递fName值 -->
                        <lightning-input type="checkbox" onclick={getFolderID} data-fname={fName}></lightning-input>  
                    </lightning-layout-item>
                    <lightning-layout-item>
                        {fName}
                    </lightning-layout-item>
                </lightning-layout>
            </div>
        </div>
    </template>
</template>

2. 完善JS文件中的getFolderID函数 #

通过事件对象event获取自定义数据属性里的fName，同时可以判断复选框的选中状态，按需处理：

getFolderID(event) {
    // 获取当前复选框对应的文件夹名称
    const folderName = event.target.dataset.fname;
    // 判断复选框是否被选中
    const isChecked = event.target.checked;

    // 这里根据需求做后续操作，比如：
    if (isChecked) {
        console.log(`选中文件夹：${folderName}`);
        // 示例：将选中的名称存入响应式数组
        // this.selectedFolders.push(folderName);
    } else {
        console.log(`取消选中文件夹：${folderName}`);
        // 示例：从数组中移除取消选中的名称
        // this.selectedFolders = this.selectedFolders.filter(name => name !== folderName);
    }
}

额外注意 #

如果allFolderNames里存在重复的文件夹名称，不要用fName作为循环的key，改用每个文件夹的唯一标识（如记录ID），避免组件渲染异常。如果需要跟踪所有选中项，建议在组件中声明响应式属性（比如selectedFolders = []）来存储选中的名称集合。

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