forked from mrlan/EnglishPal
70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
|
||
<meta name="format-detection" content="telephone=no" />
|
||
|
||
{{ yml['header'] | safe }}
|
||
{% if yml['css']['item'] %}
|
||
{% for css in yml['css']['item'] %}
|
||
<link href="{{ css }}" rel="stylesheet">
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% if yml['js']['head'] %}
|
||
{% for js in yml['js']['head'] %}
|
||
<script src="{{ js }}" ></script>
|
||
{% endfor %}
|
||
{% endif %}
|
||
|
||
<title>EnglishPal Study Room for {{username}}</title>
|
||
</head>
|
||
<style>
|
||
#checkall{
|
||
opacity: 0;
|
||
}
|
||
#span{
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
<body>
|
||
<p>勾选不认识的单词</p>
|
||
<form method="post" action="/{{username}}/mark">
|
||
<input type="submit" name="add-btn" value="加入我的生词簿"/>
|
||
<input type="checkbox" name="add-btn" value="全选"id="checkall"/><span id="span">全选</span><br>
|
||
{% for x in lst %}
|
||
{% set word = x[0]%}
|
||
<p>
|
||
<font color="grey">{{loop.index}}</font>
|
||
:
|
||
<a href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index' title={{word}}>{{word}}</a>
|
||
({{x[1]}})
|
||
<input type="checkbox" name="marked" value={{word}}>
|
||
</p>
|
||
{% endfor %}
|
||
</form>
|
||
{{ yml['footer'] | safe }}
|
||
{% if yml['js']['bottom'] %}
|
||
{% for js in yml['js']['bottom'] %}
|
||
<script src="{{ js }}" ></script>
|
||
{% endfor %}
|
||
{% endif %}
|
||
<script>
|
||
let all=document.getElementById("checkall");
|
||
let span=document.getElementById("span");
|
||
let checks=document.getElementsByName("marked")
|
||
if(checks.length>10){
|
||
all.style.opacity='1'
|
||
span.style.opacity='1'
|
||
}
|
||
all.addEventListener("click",function(){ //在按钮处设置监听
|
||
let flag=all.checked; //把按钮的checked值赋给flag
|
||
for(let i=0;i<checks.length;i++){
|
||
//循环多选框元素集，把多选框的checked改成flag，
|
||
//当btn选中，其他也选中，状态跟随
|
||
checks[i].checked=flag;
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html> |