bootstrap-4 - 使用按钮设置表单值 (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=trueor hazardous-item=false。

截屏

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