userpage_post.html: update userpage_post.html.

2022-05-29 15:19:07 +08:00 · 2022-05-29 15:19:07 +08:00 · 78e5524bae
parent b9cf94da74
commit 78e5524bae
1 changed files with 26 additions and 1 deletions
--- a/app/templates/userpage_post.html
+++ b/app/templates/userpage_post.html
@ -19,10 +19,19 @@

    <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>
@ -32,7 +41,6 @@
            ({{x[1]}})
            <input type="checkbox" name="marked" value={{word}}>
        </p>
-
       {% endfor %}
       </form>
    {{ yml['footer'] | safe }}
@ -41,5 +49,22 @@
            <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>