0

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>
Improve this question
4
  • What does the rendered html look like? Commented Jul 26, 2017 at 16:26
  • 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. Commented Jul 26, 2017 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 Commented Jul 26, 2017 at 16:41
  • @charlietfl very sorry, I wasn't thinking. I've added it to the post. Thanks Commented Jul 26, 2017 at 16:50

1 Answer 1

Reset to default
0

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);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments