首先我们会选择复制按钮和所有复选框元素。然后,它会为复制按钮添加一个事件监听器。当按钮被点击时,代码将循环遍历所有复选框,检查它们是否被选中,并将它们的值添加到一个数组中。最后,它会将所选值组合成一个单独的字符串,并将其复制到剪贴板中。
<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('请至少选择一个选项进行复制。');
}
});
附加说明:
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。