Close a drop down menu when user clicks on a radio button

Question

I have not been able to find out how to get a drop down to close when the user clicks on a radio button. If the user clicks anywhere else on the dropdown it will close, but for some reason the drop down menu does not close when the user clicks on the radio button. What do I do so when the user clicks on the radio button the drop down menu closes?

Here is my code

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><label class="checkbox-inline"><input type="radio" value="">Option 1</label></li>
      <li><label class="checkbox-inline"><input type="radio" value="">Option 2</label></li>
    </ul>
  </div>
</div>

</body>
</html>

Here is a link to a jsfiddle

https://jsfiddle.net/aaronmk2/7t43vazf/7/

Seems to be working for me. I click it and it exits. Could be iOS though. Try adding an event listener or do a simple OnClick — Colin
Same here, I'm using Chrome on Windows 7 and it works for me, but I did find another problem. You should give both radio buttons the same name attribute (i.e. <input type="radio" name="rad">) otherwise both can be selected. — user9263373

nsprenkle nsprenkle · Accepted Answer · 2018-02-14T21:41:29

In your specific instance, you can close the dropdown by removing the class open from the <div class='dropdown'>.

You can trigger this event by creating an onClick listener on the radio buttons using jQuery.

Super low tech way to do it:

// jQuery 
$(document).ready(function() {

  // Click handler for when you click the checkbox
  $(".checkbox-inline").click(function() {

    // find the nearest dropdown and remove the 'open' class to close
    $(this).closest(".dropdown").removeClass("open");
  });
})

Close a drop down menu when user clicks on a radio button

2 Answers