使用 JavaScript 从 html 复选框接收信息

Question

因此，脚本从 node.js 函数接收文件名数组并创建一个清单。效果很好。但它应该使用选定的文件名创建一个新数组并将其解析回一个新函数。 但是填充的数组是函数的输入，而不是实际的文件名。

使用的语言和包：Html、css、Javascript、node.js 和 electronjs

脚本的外观：

<script>
        const scan = require('../src/scan.js');
        const merge = require('../src/merge.js');
        scan.filesscan('tests', files => {
                files.forEach(file => {
                        document.getElementById('list').innerHTML +=
                                '<input type="checkbox" name="mycheckboxes">' + file + '<br>';
                });
        });

        function next(){            
            var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');
            alert(checkedBoxes);
            merge.fileMerge(checkedBoxes);
            location.href = 'test.html';
        }


</script>

来自scan.js的输入{'a.txt','b.txt','c.txt'}

所选项目中的预期数组 {'a.txt','c.txt'}

Answer 1

好吧，JavaScript 可以满足您的要求：

var checkedBoxes = document.querySelectorAll('input[...');

querySelectorAll 返回 NodeList 的 HTMLInputElement（在这种情况下）。

如果您想要实际的文件名，最简单的方法是为每个checkbox 的value 属性设置文件名：

files.forEach(file => {
                    document.getElementById('list').innerHTML +=
                            '<input type="checkbox" name="mycheckboxes" value="' + file + '">' + 
file + '<br>';
            });

然后你可以得到文件名（在next函数中）：

var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');
var files = [];
for (var i = 0; i < checkedBoxes.length; i++) {
    files.push(checkedBoxes[i].value);
}

不，您不能将forEach 与NodeList 类型的变量一起使用，因为它不是一个数组，而是一个类似数组的对象。