原生js多选复选框

最新推荐文章于 2024-06-10 22:18:41 发布

骨子里的偏爱

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量176

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_41823246/article/details/139099591

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生js多选复选框

截图：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript弹框多选示例</title>
<style>
    /* 样式可以在这里设置，但是由于您要求只在 JavaScript 中编写弹框，所以我们将跳过此部分 */
</style>
</head>
<body>

<script>
    // 创建一个函数来显示弹框
    function showPopup() {
        // 创建弹框容器
        var popupContainer = document.createElement('div');
        popupContainer.id = 'popupContainer';
        popupContainer.style.position = 'fixed';
        popupContainer.style.top = '50%';
        popupContainer.style.left = '50%';
        popupContainer.style.transform = 'translate(-50%, -50%)';
        popupContainer.style.background = '#fff';
        popupContainer.style.padding = '20px';
        popupContainer.style.border = '1px solid #ccc';
        popupContainer.style.borderRadius = '5px';
        document.body.appendChild(popupContainer);

        // 添加取消按钮
        var closeButton = document.createElement('button');
        closeButton.textContent = '×';
        closeButton.style.position = 'absolute';
        closeButton.style.top = '5px';
        closeButton.style.right = '5px';
        closeButton.style.border = 'none';
        closeButton.style.background = 'transparent';
        closeButton.style.font = 'bold 20px Arial';
        closeButton.style.cursor = 'pointer';
        closeButton.addEventListener('click', function() {
            document.body.removeChild(popupContainer); // 关闭弹框
        });
        popupContainer.appendChild(closeButton);

        // 添加多选框
        var options = ['Option 1', 'Option 2', 'Option 3']; // 多选项
        options.forEach(function(optionText) {
            var label = document.createElement('label');
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.value = optionText;
            label.appendChild(checkbox);
            label.appendChild(document.createTextNode(optionText)); // 将文字添加到标签内
            popupContainer.appendChild(label);
        });

        // 添加确定按钮
        var confirmButton = document.createElement('button');
        confirmButton.textContent = '确定';
        confirmButton.style.display = 'block';
        confirmButton.style.margin = '10px auto';
        confirmButton.addEventListener('click', function() {
            var checkedOptions = Array.from(popupContainer.querySelectorAll('input[type="checkbox"]:checked')).map(function(checkbox) {
                return checkbox.value;
            });
            alert('您选择的选项是：' + checkedOptions.join(', '));
            document.body.removeChild(popupContainer); // 关闭弹框
        });
        popupContainer.appendChild(confirmButton);
    }

    // 当页面加载完成后，显示弹框
    window.onload = function() {
        showPopup();
    };
</script>

</body>
</html>