使用纯JS将选中复选框筛选为JSON数组的实现问题

原代码的问题点 #

• forEach 回调未接收当前元素参数，导致this指向错误
• DOM元素的value是属性而非方法，不能用value()调用
• 判断复选框选中状态应该用element.checked属性，而非hasAttribute('checked')（后者仅判断HTML初始标记，无法反映动态选中状态）

修正后的代码 #

// Filter difficulty
const availableDifficulty = [];
const activeDifficulty = [];
const difficultyFi = document.querySelectorAll('.difficultyFi');

difficultyFi.forEach(element => {
    const difVal = element.value;
    availableDifficulty.push(difVal);
    
    // 判断当前复选框是否选中
    if (element.checked) {
        activeDifficulty.push(difVal);
    }
});

// 测试输出
console.log('所有难度选项:', availableDifficulty);
console.log('选中的难度:', activeDifficulty);

后续过滤JSON数组的示例（可选） #

如果要过滤包含难度字段的主JSON数组，可参考以下写法：

// 示例主JSON数组结构
const mainData = [
    { id: 1, name: '任务1', difficulty: 'easy' },
    { id: 2, name: '任务2', difficulty: 'hard' },
    { id: 3, name: '任务3', difficulty: 'medium' },
    { id: 4, name: '任务4', difficulty: 'easy' }
];

// 筛选出匹配选中难度的项
const filteredData = mainData.filter(item => activeDifficulty.includes(item.difficulty));
console.log('过滤后的数据:', filteredData);

内容的提问来源于stack exchange，提问作者Anake.me