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

Question

所以 scrip 从 node.js 函数接收一组文件名并创建一个 list 。效果很好。但它应该用选定的文件名创建一个新数组并将其解析回新函数。但是被填充的数组是由函数输入的，而不是实际的文件名。

使用的语言和包: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 返回 HTMLInputElement 的 NodeList(在本例中)。

如果您想要实际的文件名，最简单的方法是为每个 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 类型的变量一起使用，因为它不是数组，而是类数组对象。