Bloglink复选框

代码实现

  • 在link下index.md中添加如下代码即可实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<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>青桔气球</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>

<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>
css
<style>
.tk-comments > .tk-submit {
    opacity: 0;
    height: 0;
    transition: opacity 0.5s ease, height 0.5s ease;
    overflow: hidden;
}
</style>

效果

详见