在文章中添加条件勾选表单

写在前面

本文介绍了如何在文章中添加条件勾选表单，并解决PJAX刷新后JS失效的问题。

原文出处

https://blog.qjqq.cn/posts/51e.html

添加方式

在文章的头部添加以下代码：

隐藏评论表单

<style>
.tk-comments > .tk-submit {
    opacity: 0;
    height: 0;
    transition: opacity 0.5s ease, height 0.5s ease;
    overflow: hidden;
}
</style>

监听复选框勾选状态

<script>
document.addEventListener("DOMContentLoaded", function () {
    const checkboxes = document.querySelectorAll(".checkbox-input");

    // 更新提交按钮的显示状态
    function updateSubmitButton() {
        const twikooSubmit = document.querySelector(".tk-submit");
        const input = document.querySelector('.el-textarea__inner');

        // 检查 .tk-submit 是否存在
        if (!twikooSubmit) {
            console.warn("评论提交按钮 .tk-submit 未找到");
            return;
        }

        // 检查 .el-textarea__inner 是否存在
        if (!input) {
            console.warn("评论输入框 .el-textarea__inner 未找到");
            return;
        }

        // 检查是否所有复选框都已勾选
        const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);

        if (allChecked) {
            // 显示提交按钮
            twikooSubmit.style.opacity = "1";
            twikooSubmit.style.height = "auto";
            twikooSubmit.style.overflow = "visible";

            // 填写模板信息到输入框
            // input.value = '-name：\nlink：\navatar：\ndescr：\n';

            // 模拟输入事件以更新界面
            input.dispatchEvent(new Event('input', { bubbles: true }));

            // 将光标设置到最后一行
            input.focus();
            input.setSelectionRange(input.value.length, input.value.length);
        } else {
            // 隐藏提交按钮
            twikooSubmit.style.opacity = "0";
            twikooSubmit.style.height = "0";
            twikooSubmit.style.overflow = "hidden";
        }
    }

    // 给每个复选框添加监听器
    checkboxes.forEach(checkbox => checkbox.addEventListener("change", updateSubmitButton));
});
</script>

在文章中添加条件勾选表单

在想要添加条件勾选表单的地方添加以下代码：

<p style="padding: 0 0 0 .8rem">
    请<strong>勾选</strong>你符合的条件：
</p>
<div id="friendlink_checkboxs" style="padding: 0 0 0 1.6rem">
    <p>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-input" id="checkbox1">
            我已添加 <b>RandomEnch</b> 博客的友情链接
        </label>
    </p>
    <p>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-input" id="checkbox2">
            我的链接主体为 <b>个人</b>，网站类型为<b>博客</b>
        </label>
    </p>
    <p>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-input" id="checkbox3">
            我的网站现在可以在中国大陆区域正常访问
        </label>
    </p>
    <p>
        <label class="checkbox">
            <input type="checkbox" class="checkbox-input" id="checkbox4">
            网站内容符合中国大陆法律法规
        </label>
    </p>
</div>

解决PJAX刷新后JS失效的问题

PJAX的开启，会导致DOM的监听器失效，因此需要在PJAX刷新后重新绑定监听器，将JS代码修改为如下即可：

<script>
function initCheckboxLogic() {
    const checkboxes = document.querySelectorAll(".checkbox-input");

    // 更新提交按钮的显示状态
    function updateSubmitButton() {
        const twikooSubmit = document.querySelector(".tk-submit");
        const input = document.querySelector('.el-textarea__inner');

        // 检查 .tk-submit 是否存在
        if (!twikooSubmit) {
            console.warn("评论提交按钮 .tk-submit 未找到");
            return;
        }

        // 检查 .el-textarea__inner 是否存在
        if (!input) {
            console.warn("评论输入框 .el-textarea__inner 未找到");
            return;
        }

        // 检查是否所有复选框都已勾选
        const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);

        if (allChecked) {
            // 显示提交按钮
            twikooSubmit.style.opacity = "1";
            twikooSubmit.style.height = "auto";
            twikooSubmit.style.overflow = "visible";

            // 填写模板信息到输入框
            // input.value = '-name：\nlink：\navatar：\ndescr：\n';

            // 模拟输入事件以更新界面
            input.dispatchEvent(new Event('input', { bubbles: true }));

            // 将光标设置到最后一行
            input.focus();
            input.setSelectionRange(input.value.length, input.value.length);
        } else {
            // 隐藏提交按钮
            twikooSubmit.style.opacity = "0";
            twikooSubmit.style.height = "0";
            twikooSubmit.style.overflow = "hidden";
        }
    }

    // 给每个复选框添加监听器
    checkboxes.forEach(checkbox => checkbox.addEventListener("change", updateSubmitButton));
}

document.addEventListener("DOMContentLoaded", function () {
    initCheckboxLogic();
});

// 监听 PJAX 完成事件
document.addEventListener("pjax:complete", function () {
    initCheckboxLogic();
});
</script>