Flask/jQuery Select 全部来自 Class

Question

我希望能够 select 使用单个复选框的组中的所有项目。我发现这段代码允许我 select 所有复选框。

<script>
$('#checkAll').click(function () {
    $('input:checkbox').prop('checked', this.checked);
});
</script>

建议我使用 class 作为我想要 select 使用我所做的 .class 名称的字段。得到

<script>
$('#checkAll').click(function () {
    $('input:checkbox.CheckThese').prop('checked', this.checked);
});
</script>

并且因为我使用的是 wtforms，所以我按照此处的建议将 class 传递给了该字段： Add a css class to a field in wtform

哪个给了HTML

<form method="POST" action="{{ url_for('form') }}">
    {{ form.csrf_token }}
    <h3>Building 100</h3>
    <input type="checkbox" id="checkAll"/>Select All

    {{ form.B100_Enc_Dec(class_="CheckThese") }}
    {{ form.B100_Net(class_="CheckThese") }}

    <h3>Building 200</h3>
        {{ form.B200_Enc_Dec }}
        {{ form.B200_Net }}

    <h3>Building 201 North</h3>
        {{ form.B201N_Enc_Dec }}
        {{ form.B201N_Net }}

</form>

一旦我改变了这些东西，按钮就不再 select 除了它自己。我需要能够通过构建 select 所有设备，但似乎无法使其工作。

编辑： html 输出为：

    <form method="POST" action="/form">
                    <input id="csrf_token" name="csrf_token" type="hidden" value="---">
                    <h3>Building 100</h3>
                    <input type="checkbox" id="checkAll"/>Select All
                    <ul class="CheckThese" id="B100_Enc_Dec">
<li><input id="B100_Enc_Dec-0" name="B100_Enc_Dec" type="checkbox" value="10.203.81.151"> <label for="B100_Enc_Dec-0">608 Decoder</label></li>
<li><input id="B100_Enc_Dec-1" name="B100_Enc_Dec" type="checkbox" value="10.203.81.152"> <label for="B100_Enc_Dec-1">601 Decoder</label></li>
<li><input id="B100_Enc_Dec-2" name="B100_Enc_Dec" type="checkbox" value="10.203.81.153"> <label for="B100_Enc_Dec-2">ALC1 Decoder</label></li>
<li><input id="B100_Enc_Dec-3" name="B100_Enc_Dec" type="checkbox" value="10.203.81.154"> <label for="B100_Enc_Dec-3">ALC2 Decoder</label></li>
<li><input id="B100_Enc_Dec-4" name="B100_Enc_Dec" type="checkbox" value="10.203.81.155"> <label for="B100_Enc_Dec-4">ALC3 Decoder</label></li></ul>

Answer 1

哇。看来答案如下：

如果您使用 _class 方法将 class 分配给 wtforms 复选框字段，它会将其分配给 ul 标签。因此，在您的脚本中，您必须 select 这样的框：

$('#checkAll').click(function () {
    $('ul.CheckThese li input').prop('checked', this.checked);
});

Flask/jQuery Select 全部来自 Class

Flask/jQuery Select All By Class

javascript

python

jquery

flask

flask-wtforms