I want to customize the appearance of my radio buttons on a form to make them look like toggle-able HTML buttons, similar to the examples shown in these Bootstrap examples. By using Flask, Bootstrap, and jinja2, I've successfully converted my radio buttons to resemble "buttons". The relevant section of my form currently displays like this:
{{ form.setting.label }}<br>
{% for subfield in form.setting %}
<tr>
<td>{{ subfield(class_="no_rad") }}</td>
<td>{{ subfield.label(class_="btn btn-primary") }}</td>
</tr>
{% endfor %}<br>
In this code, 'subfield' represents the radio button itself. The class_="no_rad" attribute applies a CSS class that I created with display: none;. Similarly, the subfield.label is given a Bootstrap CSS class to simulate a button-like appearance. While these buttons are "selectable" (they have data associated with them), there are a couple of additional things I would like to achieve:
- I want the appearance of the button to change when clicked, indicating it is toggled
- I'd like the buttons to be deselected if clicked again (unlike traditional radio buttons)
I understand that achieving this functionality may involve using jQuery, but I'm unsure of how to get started with that.