Bootstrap 4堆叠无线电btn组

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
});