Skip to main content

Return to Question

Post Timeline

added html output
Source Link
user2865435
user2865435

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>

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>
Source Link
user2865435
user2865435

Flask/jQuery Select All By Class

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.