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

Question

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

1. 我不确定如何或在何处存储 itemtype 变量

2. 我不确定如何只允许选择一个按钮（而且我不想使用单选按钮）

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>

查看单选按钮控件“危险物品”的名称。我不知道您使用哪种服务器端语言，但该名称很容易来自布尔变量。这就是您存储变量的方式和位置。

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

为了测试，你可以把这个javascript放在你的页面上：

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

您可以按 F12 进入浏览器的开发者工具查看选择的值。

在表单回发

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

截图

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