使用按钮设置表单值 (Bootstrap/Bootstrap Studio)

Question

这就是我的表单的样子，基本上我希望用户单击危险或非危险并将值（项目类型）设置为 Haz 或 NonHaz 这是我的问题：

我不确定如何或在何处存储 itemtype 变量
我不确定如何只允许选择一个按钮（而且我不想使用单选按钮）

Answer 1

您不想使用单选按钮的原因是什么？因为单选按钮最适合您的场景。如果是因为它的外观，bootstrap有一个按钮插件可以使用：https://getbootstrap.com/docs/4.1/components/buttons/#button-plugin

HTML

<div class="jumbotron jumbotron-fluid">
    <div class="container text-center">
        <h1>
            Is your item considered Hazardous?
        </h1>
        <p class="lead">
            This includes all liquids, batteries and lighters.
        </p>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="hazardous-item" value="true" checked />
                Hazardous
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="hazardous-item" value="false" />
                Non Hazardous
            </label>
        </div>
    </div>
</div>

查看单选按钮控件的名称 "hazardous-item"。我不知道您使用的是什么服务器端语言，但该名称很容易来自布尔变量。这就是您存储变量的方式和位置。

使用 bootstrap 按钮插件，当您单击任何按钮时，它会像您单击单选按钮一样更新下面的单选按钮。

要进行测试，您可以将此 javascript 放在您的页面上：

$(function(){
    $('input:radio[name="hazardous-item"]').change(function(){
        console.info($(this).val());
    });
});

您可以 F12 转到浏览器的开发者工具以查看所选值。

表格post-返回

当您将表单提交回服务器时，选定的布尔值将绑定到变量，即 hazardous-item=true 或 hazardous-item=false。

截图

jsfiddle: http://jsfiddle.net/aq9Laaew/230903/

使用按钮设置表单值 (Bootstrap/Bootstrap Studio)

Using buttons to set form values (Bootstrap/Bootstrap Studio)

bootstrap-4

bootstrap-studio

HTML

表格post-返回

截图