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>
+  <head>
-    <meta charset="UTF-8">
+    <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="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 }}
+    {{ yml['header'] | safe }} {% if yml['css']['item'] %} {% for css in
-    {% if yml['css']['item'] %}
+    yml['css']['item'] %}
-        {% for css in yml['css']['item'] %}
+    <link href="{{ css }}" rel="stylesheet" />
-        <link href="{{ css }}" rel="stylesheet">
+    {% endfor %} {% endif %} {% if yml['js']['head'] %} {% for js in
-        {% endfor %}
+    yml['js']['head'] %}
-    {% endif %}
+    <script src="{{ js }}"></script>
-    {% if yml['js']['head'] %}
+    {% endfor %} {% endif %}
        {% for js in yml['js']['head'] %}
            <script src="{{ js }}" ></script>
        {% endfor %}
    {% endif %}
    <title>EnglishPal Study Room for {{username}}</title>
-</head>
+  </head>
-<body>
+  <body>
    <p>勾选不认识的单词</p>
    <form method="post" action="/{{username}}/mark">
-       <input type="submit" name="add-btn" value="加入我的生词簿"/>
+      <input type="submit" name="add-btn" value="加入我的生词簿" />
-       {% for x in lst %}
+      <input
-          {% set word = x[0]%}
+        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 }}
+    {{ yml['footer'] | safe }} {% if yml['js']['bottom'] %} {% for js in
-    {% if yml['js']['bottom'] %}
+    yml['js']['bottom'] %}
-        {% for js in yml['js']['bottom'] %}
+    <script src="{{ js }}"></script>
-            <script src="{{ js }}" ></script>
+    <script>
-        {% endfor %}
+      function checkall() {
-    {% endif %}
+        const selectAllCheckBox = document.querySelectorAll(".select-all");
-</body>
+        for (let i = 0; i < selectAllCheckBox.length; i++) {
          selectAllCheckBox[i].checked = true;
        }
      }
    </script>
    {% endfor %} {% endif %}
  </body>
 </html>