使用 BooleanField 通过 Javascript 切换隐藏 html 元素答案

【问题标题】：Using BooleanField to toggle hide html element with Javascript使用 BooleanField 通过 Javascript 切换隐藏 html 元素
【发布时间】：2018-03-01 19:03:59
【问题描述】：

我正在尝试使用 Flask 实现一个复选框，该复选框在另一个字段可见时进行切换。如果我只在 HTML 中执行此操作，则效果很好，但我显然不了解 Flask 中的相关内容。

我的 HTML 和 javascript 位于页面底部。

<!DOCTYPE html>
{% import "bootstrap/wtf.html" as wtf %}


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />

</head>

<body>  
    {% block content %}
        <div class="page-header">
            <h1>Normal Change Request</h1>
            <h4>Hello, Gavin White</h4>
        </div>

        <form class="hide-test" method="post" role="form">
            <div id="core-dte">
                {{form.coreDate.label}}
                {{form.coreDate}}
            </div>
            <div id="hiding-dte" style="display:block">
                {{form.hideDate.label}}
                {{form.hideDate}}   
            </div>
            <div id="chk-button">{{form.hide.label}}</div>
            <div id="chkHide" onclick='myFunction("chkHide", "hiding-dte")'>{{form.hide}}</div>
            <div>
                {{form.submit}}
            </div>
        </form>
    {% endblock %}

    <script>
        function myFunction(chk, txt) {
            var checkBox = document.getElementById(chk);
            var text = document.getElementById(txt);
            if (checkBox.checked == true){
                text.style.display = "block";
            } else {
               text.style.display = "none";
            }
        }
    </script>
</body>

Python：

class BaseForm(FlaskForm):
    '''
    '''
    coreDate = DateField('Date:')
    hideDate = DateField('Hide Date:')
    hide = BooleanField('Hide')
    submit = SubmitField('Submit')

@app.route('/')
def index():
    '''
    '''

    baseForm = BaseForm()
    if baseForm.validate_on_submit():
        core_date = baseForm.coreDate.data
        hide_date = baseform.hideDate.data
        hide = baseForm.hide.data

        return '<h1>Success<\h1>'

    else:
        return render_template('hide-test.html', form=baseForm)

我已经在谷歌上搜索并尝试了一些实现，但现在我很乐意将头发拉出来并需要一些帮助。如果有一种方法可以使用 python 而不是 javascript 来做到这一点，那就太好了，但只是想让它更有效地工作。

【问题讨论】：

标签： javascript python-3.x flask flask-wtforms

【解决方案1】：

我已经为我解决了这个问题。

我设法解决的解决方案是我引用了已放置复选框的 html 标记。

<div id="chkHide" onclick='myFunction("chkHide", "hiding-dte")'>{{form.hide}}</div>

这在允许我隐藏元素时有效，但由于我不明白的原因，再次单击时它不会显示元素。

Resoluton，我加载了页面并检查了 checkbox 元素，发现它的 id 与它的名称“hide”相同。我将函数调用更改为将其引用为要测试的复选框。

<div id="check" onclick='myFunction("check", "hiding-dte")'>{{form.hide}}</div>

现在这似乎很明显，但如果其他人遇到类似的问题，希望这会有所帮助。

【讨论】：