提取通过flask动态生成的复选框的值答案

【问题标题】：Extracting value of checkbox generated dynamically through flask提取通过flask动态生成的复选框的值
【发布时间】：2017-07-18 20:54:53
【问题描述】：

有没有办法通读 HTML 页面并返回被点击的动态复选框的值？

现在，即使不使用 JS，我也知道如何从静态复选框中获取值，但由于我使用数据库中的数据生成以下复选框，因此我不确定如何确定每个复选框并知道用户选中了哪个复选框，

当我在 chrome 中浏览开发人员工具时，我可以看到生成的复选框的值发生了变化，但是当我引用它们时它仍然不起作用。

<!DOCTYPE html>
<html lang="en">

 <form action="/test" method="post">
  <button type="submit" id="exporst-btn" class="btn btn-primary">Import Test Data <span class="glyphicon glyphicon-import"></span></button>
  <br>
   <br>
     <div id="table">
        <table class="table table-condensed">
        <thead>
            <tr>
                <th>Selection</th>
                <th>Slno</th>
                <th>Region</th>
            </tr>
        </thead>

    <tbody>
    {% for obj in TD %}
        <tr>
            <td>
                <input type="checkbox" name="chb[]"  > {{obj.OEHR_Mtest_Slno}}
                </td>
            <td>
                {{obj.OEHR_Mtest_Slno}}
                </td>
            <td>
                {{obj.OEHR_Mtest_SF_Part_Number}}
            </td>

        </tr>
    {% endfor %}
    </tbody>

</table>
</div>

  </div>

        <!--<p id="export" name="test"></p>-->
        <input type="hidden" id="exp" name="test">
<button type="submit" id="export-btn" class="btn btn-success">Execute <span class="glyphicon glyphicon-play"></span></button>

</form>


</body>
<script type="text/javascript"><!--
   $('#export-btn').click(function () {
       alert($('#mytable').find('input[type="checkbox"]:checked').length + '      checked');
    });
 </script>


</html>

我可以使用上面的 JS 知道有多少个复选框被选中，我想知道被选中的复选框的值，我无法得到。

【问题讨论】：

值是什么意思？名字？它在哪一行？
@M.Davis 这个 {{obj.OEHR_Mtest_Slno}} 来自复选框旁边的服务器
可能会渲染输出

标签： javascript python html jinja2 flask-sqlalchemy

【解决方案1】：

如果我没记错的话，

var foo = $('#mytable').find('input[type="checkbox"]:checked')

将返回一个 html 元素数组，这些元素是复选框，并被选中。然后你可以这样做：

var bar = [];
foo.each(function (index) {
    var baz = this.parentNode.textContent || this.parentNode.innerText;
    if (baz && baz.length > 0)
        bar.push(baz);
});
console.log(bar);

这将使bar 成为一个包含已检查值的数组。它获取被选中的复选框，找到它们的父母（<td> 标签），并获取里面的文本（跳过<input> 标签）。这将在客户端完成。

【讨论】：

【解决方案2】：

因为您正在动态生成复选框，所以动态生成复选框的值也很有帮助。这样，当您通过提交按钮POST 请求时，Flask 可以通过读取值来确定哪些复选框被选中。我会将您的 HTML 更改为：

{% for obj in TD %}
    <tr>
        <td>
            {# Assuming obj.OEHR_Mtest_Slno is a unique value #}
            <input type="checkbox" name="chkbox" value="{{obj.OEHR_Mtest_Slno}}"> {{obj.OEHR_Mtest_Slno}}
            </td>
        <td>
            {{obj.OEHR_Mtest_Slno}}
            </td>
        <td>
            {{obj.OEHR_Mtest_SF_Part_Number}}
        </td>

    </tr>
{% endfor %}

然后在您的后端，您可以通过以下方式访问这些值：

# Use .getlist if you are using HTML form elements with the same name
chkbox_values = request.form.getlist('chkbox')  # returns a list of values that were checked

【讨论】：

这确实有效！在复选框值中引入 {{DB value}} 的好主意，我想知道为什么它不起作用，因为在渲染时它会按顺序生成自己的值，所以我试图以某种方式得到它，Smart move。