Hexo条件勾选表单

Twikoo

在link下index.md中添加如下代码即可实现

html

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
<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" id="checkbox1" onclick="checkForm()">
我已添加 <b>Hwe</b> 博客的友情链接
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox2" onclick="checkForm()">
我的链接主体为 <b>个人</b>,网站类型为<b>博客</b>
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在中国大陆区域正常访问
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合中国大陆法律法规
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox5" onclick="checkForm()">我的网站可以在1分钟内加载完成首屏
</label>
</p>
</div>

javascript

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
<script>
var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
if (twikooSubmit) {
twikooSubmit.style.opacity = "0";
}
function checkForm() {
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
var checkbox4 = document.getElementById("checkbox4");
var checkbox5 = document.getElementById("checkbox5");
var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked && checkbox5.checked) {
twikooSubmit.style.opacity = "1";
twikooSubmit.style.height = "auto";
twikooSubmit.style.overflow = "auto";
var input = document.getElementsByClassName('el-textarea__inner')[0];
let evt = document.createEvent('HTMLEvents');
evt.initEvent('input', true, true);
input.value = '昵称(请勿包含博客等字样):\n网站地址(要求博客地址,请勿提交个人主页):\n头像图片url(请提供尽可能清晰的图片,我会上传到我自己的图床):\n描述:\n';
input.dispatchEvent(evt);
input.focus();
input.setSelectionRange(-1, -1);
} else {
twikooSubmit.style.opacity = "0";
twikooSubmit.style.height = "0";
twikooSubmit.style.overflow = "hidden";
}
}
</script>

css

1
2
3
4
5
6
7
8
<style>
.tk-comments > .tk-submit {
opacity: 0;
height: 0;
transition: opacity .5s, height .5s;
overflow: hidden;
}
</style>

Waline

html

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
<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" id="checkbox1" onclick="checkForm()">
我已添加 <b>Hwe</b>的友情链接
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox2" onclick="checkForm()">
我的链接主体为<b>个人</b>,网站类型为<b>博客</b>
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在中国大陆区域正常访问
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合中国大陆法律法规
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox5" onclick="checkForm()">我的网站可以在1分钟内加载完成首屏
</label>
</p>
</div>

javascript

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
<script>
var walineSubmit = document.getElementsByClassName("wl-comment")[0];
if (walineSubmit) {
walineSubmit.style.opacity = "0";
}
function checkForm() {
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
var checkbox4 = document.getElementById("checkbox4");
var checkbox5 = document.getElementById("checkbox5");
var walineSubmit = document.getElementsByClassName("wl-comment")[0];
if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked && checkbox5.checked) {
walineSubmit.style.opacity = "1";
walineSubmit.style.height = "auto";
walineSubmit.style.overflow = "auto";
var input = document.getElementsByClassName("wl-editor")[0];
let evt = new Event('input');
input.dispatchEvent(evt);
input.value = '昵称: \n博客链接: \n头像链接: \n描述: \n';
input.setSelectionRange(-1, -1);
} else {
walineSubmit.style.opacity = "0";
walineSubmit.style.height = "0";
walineSubmit.style.overflow = "hidden";
}
}
</script>

css

1
2
3
4
5
6
7
8
<style>
.wl-comment {
opacity: 0;
height: 0;
transition: opacity .5s, height .5s;
overflow: hidden;
}
</style>

效果

勾选你符合的条件: