CSS: Depress Dropdown grouped with Radio Buttons

Question

I'm using bootstrap to style a group of radio buttons that also include a dropdown.

When the user selects an option from the dropdown OTHER is not included as one of the radio buttons, so it looks like the last depressed radio button has been chosen when really C | D | E C | D | E C | D | E has been.

Is it possible to include the OTHER dropdown as one of the radio buttons so it looks depressed when the user selected C,D,E?

Codepen here if helpful: https://codepen.io/mayagans/pen/qBdaZEJ

 $( document ).ready(function() { $("input[name='test']").change(function(){ $("#results").text($("input[name='test']:checked").val()); }); }); $(".dropdownitems").click(function () { var value = $(this).attr("href"); document.getElementById("results").innerHTML = value });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" data-toggle="buttons"> <label id='RADIO' class="btn btn-primary"> <input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE </label> <label class="btn btn-primary"> <input type="radio" name="test" id="testA" autocomplete="off" value="A">A </label> <label class="btn btn-primary"> <input type="radio" name="test" id="testB" autocomplete="off" value="B">B </label> <div class="btn-group"> <label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <input type="radio" class="" name="test" id="OTHER" autocomplete="off">OTHER<span class="caret"></span> </label> <ul class="dropdown-menu"> <li><a href="C" class="dropdownitems" id="C">C</a></li> <li><a href="D" class="dropdownitems" id="D">D</a></li> <li><a href="E" class="dropdownitems" id="E">E</a></li> </ul> </div> </div> <div id="results"></div>

Answer 1

I don't think that radio buttons are the good solution for this. You could just use "simple" buttons. Anyway, with bootstrap, you could add "active" to the button ( or radio button) class so that it will be shown as if it was pressed. With single button

Pressed

 <button type="button" class="btn btn-primary active">Click Me!</button>

Normal

 <button type="button" class="btn btn-primary">Click Me!</button>

With your radio button it's the same

Pressed

<label class='btn btn-primary active'>
    <input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
  </label>

Normal

<label class='btn btn-primary'>
    <input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
  </label>

Example

<script>
    $(document).ready(function () {
        let pressedId
        let buttonsId = ["a", "b"] // List of the buttons which are always visible
        let dropDownsButtonId = ["c", "d", "e"] //List of the buttons of the dropdown
        $("button").click(function () {
            if (buttonsId.includes(this.id)) { //First "if" for "always visible" button
                changeClass(this.id)
            } else if (dropDownsButtonId.includes(this.id)) {//Second if for the button of the dropdown
                changeClass("dropDownMenuButton")
            }
        })

        function changeClass(id) {
            if (pressedId !== undefined)
                document.getElementById(pressedId).className = document.getElementById(pressedId).className.replace(" active", "")
            document.getElementById(id).className += " active"
            pressedId = id
        }
    })
</script>

<button type="button" class="btn btn-primary" id="a">a</button>
    <button type="button" class="btn btn-primary" id="b">b</button>
    <div class="dropdown">
        <div class='btn-group'>
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropDownMenuButton"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>
            <ul class='dropdown-menu'>
                <li>
                    <button type="button" class="btn btn-primary" id="c">c</button>
                </li>
                <li>
                    <button type="button" class="btn btn-primary" id="d">d</button>
                </li>
                <li>
                    <button type="button" class="btn btn-primary" id="e">e</button>
                </li>
            </ul>
        </div>
    </div>