首先我们会选择复制按钮和所有复选框元素。然后，它会为复制按钮添加一个事件监听器。当按钮被点击时，代码将循环遍历所有复选框，检查它们是否被选中，并将它们的值添加到一个数组中。最后，它会将所选值组合成一个单独的字符串，并将其复制到剪贴板中。
代码语言：html复制<input type="checkbox" id="checkbox1" value="value1"> Option 1
<input type="checkbox" id="checkbox2" value="value2"> Option 2
<input type="checkbox" id="checkbox3" value="value3"> Option 3
<br>
<button id="copy-button">Copy Selected</button>const copyButton = document.getElementById('copy-button');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
copyButton.addEventListener('click', () => {
const selectedValues = [];
// 循环遍历所有复选框
for (const checkbox of checkboxes) {
// 检查复选框是否被选中
if (checkbox.checked) {
// 将复选框的值添加到数组中
selectedValues.push(checkbox.value);
}
}
// 检查是否有选定的值
if (selectedValues.length > 0) {
// 将选定的值组合成一个带有换行符分隔符的单个字符串
const copyText = selectedValues.join('n');
// 使用ClipboardJS将文本复制到剪贴板（可选）
// 您可以安装并使用ClipboardJS库以获得更好的兼容性
// https://clipboardjs.com/
// const clipboard = new ClipboardJS('#copy-button');
// clipboard.copy(copyText);
navigator.clipboard.writeText(copyText).then(() => {
console.log('Values copied to clipboard!');
}, (error) => {
console.error('Error copying values:', error);
});
} else {
alert('请至少选择一个选项进行复制。');
}
});附加说明：
- 您可以修改代码以包括自定义分隔符。
- 您可以使用ClipboardJS库以获得更好的兼容性和额外功能。
- 您可以添加错误处理来处理复制到剪贴板失败的情况。
- 您可以根据特定需求调整样式和功能。
我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
