Question

有没有办法读取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知道已经检查了多少个复选框，我想知道已检查的复选框的值，我无法得到它。

Answer 1

由于您动态生成复选框，因此动态生成复选框的值也很有帮助。这样，当您通过提交按钮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

Answer 2

如果我没弄错的话，

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>标记）。这将在客户端进行。

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

2 个答案: