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 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>