Question

我试图做一个自定义复选框，以便可以在Flask中检索值，但是由于某种原因，它没有通过。

这是我的HTML / CSS / JS：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .checkbox {
        height: 14px;
        width: 14px;
        border-radius: 3px;
        background-color: #fff;
        border: 1px solid black;
        cursor: default;
      }
      .checkbox p {
        display: none;
        font-size: 12px;
        line-height: 14px;
        max-height: 14px;
        vertical-align: middle;
        text-align: center;
        color: #777;
      }
      .checkbox.selected p {
        display: block;
      }
      input[type="checkbox"].hiddencheckbox {
        display: none;
      }
    </style>
  </head>
  <body>
    <form action="{{ url_for("load_checkbox") }}" method="post">
    <div class="checkbox" onclick="toggleCheck(this)">
      <p>&check;</p>
      <input type="checkbox" name="morning" class="hiddencheckbox">
    </div>
    <input type="submit" value="Submit">
    </form>
  </body>
  <script type="text/javascript">
    function toggleCheck(checkbox) {
      var realcheckbox = checkbox.childNodes[1];
      checkbox.classList.toggle("selected");
      realcheckbox.checked ^= 1;
    }
  </script>
</html>

还有我的Python：

from flask import Flask, request, render_template

app = Flask(__name__)


@app.route("/", methods=["POST", "GET"])
def load_checkbox():
    if request.method == "POST":
        print(request.form)
    return render_template("checkbox.html")


if __name__ == "__main__":
    app.run(debug=True)

这里是我单击“提交”时打印的内容，而与复选框的状态无关：ImmutableMultiDict([])

如果要选中此复选框，我希望它打印ImmutableMultiDict([('morning', 'on')])（或类似的东西），如果不选中此复选框，我希望它打印ImmutableMultiDict([('morning', 'off')])（或类似的东西）或ImmutableMultiDict([])。

我在这里想念什么？为什么它不起作用？

谢谢。

Answer 1

由于某种原因，结果是checkbox.childNodes[3]。现在可以了。

自定义复选框不切换

1 个答案: