Flask/jQuery Select All By Class

Question

I want to be able to select all items in a group with a single checkbox. I found that this code allows me to select ALL check boxes.

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

It was reccomended that I use a class for the fields that I wanted to select using the .className which I did. and got

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

And since I am using wtforms, I passed the class to the field as suggested here: Add a css class to a field in wtform

Which gave the 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>

As soon as I changed these things the button no longer selects anything besides itself. I need to be able to select all devices by building but can't seem to make it work.

Edit: The html output is:

    <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>

The rendered html gives me a checkbox That says select all but when I click it it simply checks itself. If I remove the class portions And select all, it will select every checkbox on the page. — , Jul 26 '17 at 16:39
I mean for the other checkboxes. Hard to debug client side code when you show only server side. That's not what the browser sees...it sees proper html — charlietfl, Jul 26 '17 at 16:41
@charlietfl very sorry, I wasn't thinking. I've added it to the post. Thanks — , Jul 26 '17 at 16:50

score 0 · Accepted Answer · answered Jul 26 '17 at 17:05

Wow. It seems the answer is as follows:

If you assign a class to a wtforms checkbox field using the _class method it assigns it to the ul tag. Therefore in your script you have to select the boxes as such:

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

Flask/jQuery Select All By Class

1 Answers1