Flask/jQuery 选择"按类"全部

Question

我希望能够通过一个复选框选择组中的所有项目。我发现此代码允许我选中所有复选框。

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

建议我对我想使用 .className 选择的字段使用类，我这样做了。

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

由于我使用的是 wtforms，因此我按照此处的建议将类传递给字段： 将 css 类添加到 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>

一旦我更改了这些内容，按钮就不再选择除自身以外的任何内容。我需要能够通过构建来选择所有设备，但似乎无法使其工作。

编辑：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 方法将类分配给 wtforms 复选框字段，则会将其分配给 ul 标记。因此，在脚本中，您必须选择以下框：

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