时间戳

首页 > 解决方案 > 在 Web 表单中将单选按钮呈现为可切换按钮的最佳方式

javascript - 在 Web 表单中将单选按钮呈现为可切换按钮的最佳方式

问题描述

我希望表单上的单选按钮看起来像可切换的 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"CSS 类display: none;。使用相同的方法，subfield.label分配一个 Bootstrap CSS 类，使其看起来像一个按钮。这些按钮是“可选择的”（它们有数据），但是：

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

标签： javascripthtmlcssbootstrap-4

解决方案

在大多数情况下，我已经弄清楚如何完成我想要的。如果没有手动编码的 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 中的第一个按钮何时被点击，而不是其他按钮。编辑：我已经用这个解决了这个问题

推荐阅读