Bootstrap radio buttons do not work

Question

I am using radio buttons in Bootstrap 4 like this:

    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" id="physical-option" onclick="alert('Physical!')" checked="checked" /> Physical
        </label>
        <label class="btn btn-primary">
            <input type="radio" id="scenery-option" onclick="alert('Scenery!')" /> Scenery
        </label>
    </div>

As you can see I have the onclicks there. But, when I click them, nothing happens! Is this a bug in Bootstrap?

Answer 1

Can you put the onclick on the label instead of the radio? I think bootstrap makes the label the radio trigger instead of the actual radio button.

Have a look at the scenery button:

https://jsfiddle.net/zf7p2Lbd/

    <label class="btn btn-primary" onclick="alert('Scenery!')">
        <input type="radio" id="scenery-option" /> Scenery
    </label>