在web窗体中将单选按钮呈现为可切换按钮的最佳方式

Question

我希望表单上的单选按钮看起来像可切换的HTML按钮，就像这些Bootstrap示例一样。使用Flask、Bootstrap和jinja2，我已经能够将我的单选按钮转换为"；按钮"；。我表格的这一部分目前看起来是这样的：

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

在这里，子字段就是单选按钮本身。class_="no_rad"分配一个我用display: none;创建的CSS类。使用相同的方法，subfield.label被分配了一个Bootstrap CSS类，使其看起来像一个按钮。按钮是"；"可选"；(他们有数据(，然而：

• 我希望按钮在单击时显示为切换状态
• 我希望在重新单击时取消选择按钮(与典型的单选按钮不同(

我知道这可能需要Jquery，但我不知道从哪里开始。

Answer 1

对于的大部分部分，我已经弄清楚了如何实现我想要的。在没有手动编码Jquery的情况下，我只需要集成更多的引导功能(按照我问题中链接的示例(，如下所示：

base.html中一堆难看的src标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

以及正在显示的页面中的Bootstrap/jinja2混合泳：

{{ form.setting.label }}<br>           
<div class="btn-group-toggle" data-toggle="buttons">
{% for subfield in form.setting %}
<label class="btn btn-primary">
{{ subfield}} {{ subfield.label(style="cursor:pointer;") }}
</label>
{% endfor %}<br> 
{% for error in form.setting.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</div>

单击按钮时，看起来已激活。我之所以说是因为有一些奇怪的渲染功能：

• 我必须手动输入style="cursor:pointer;"到subfield.label，否则当鼠标悬停在按钮的标签上时，光标将是默认的，而稍微围绕该标签将默认为按钮的指针光标
• 按钮本身的高度超出了应有的高度。这可以用CSS解决，但我不确定为什么会发生这种情况
• 我的表单的一部分是动态的，并使用jquery基于单选按钮值进行更新。然而，使用这些Bootstrap样式，我的脚本只检测div中的第一个按钮何时被点击，而不检测其他按钮。编辑：我已经用这个解决了这个问题