Bootstrap 4堆叠无线电btn-group

Question

所以我有一个btn组的单选按钮，我想要反应堆叠。 我根本无法让它工作，除非我删除了btn-group但当时的单选按钮当然不知道检查了哪些并且只是停止工作。

<div class="container">
    <div class="row">
        <div class="btn-group" role="group" data-toggle="buttons">
            <div class="col-lg-4">
                <label class="btn btn-primary active"><input hidden="true" type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1</label>
            </div>
            <div class="col-lg-4">
                <label class="btn btn-primary"><input hidden="true"  type="radio" name="options" id="option2" autocomplete="off"> Radio 2</label>
            </div>
            <div class="col-lg-4">
                <label class="btn btn-primary"><input hidden="true" type="radio" name="options" id="option3" autocomplete="off"> Radio 3</label>
            </div>
        </div>
    </div>
</div>

Answer 1

您只需添加以下脚本即可实现：

$("input[type=radio]").on("change",function(){
    $('input:checked').parent().addClass("active"); // Change active with your own class name
});