i added select all function

2022-06-06 17:11:29 +08:00
1 changed files with 57 additions and 38 deletions
--- a/app/templates/userpage_post.html
+++ b/app/templates/userpage_post.html
@ -1,45 +1,64 @@
 <!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" />
+  <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 %}
+    {{ 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>
-<body>
+  </head>
+  <body>
    <p>勾选不认识的单词</p>
    <form method="post" action="/{{username}}/mark">
-       <input type="submit" name="add-btn" value="加入我的生词簿"/>
-       {% for x in lst %}
-          {% set word = x[0]%}
+      <input type="submit" name="add-btn" value="加入我的生词簿" />
+      <input
+        onclick="checkall()"
+        type="button"
+        name="add-btn"
+        value="select all"
+      />
+      {% 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>
+        <a
+          href="http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index"
+          title="{{word}}"
+          >{{word}}</a
+        >
        ({{x[1]}})
-            <input type="checkbox" name="marked" value={{word}}>
+        <input
+          class="select-all"
+          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 %}
-</body>
+    {{ yml['footer'] | safe }} {% if yml['js']['bottom'] %} {% for js in
+    yml['js']['bottom'] %}
+    <script src="{{ js }}"></script>
+    <script>
+      function checkall() {
+        const selectAllCheckBox = document.querySelectorAll(".select-all");
+        for (let i = 0; i < selectAllCheckBox.length; i++) {
+          selectAllCheckBox[i].checked = true;
+        }
+      }
+    </script>
+    {% endfor %} {% endif %}
+  </body>
 </html>