jQuery Mobile - Radio Vertical group Widget

Description

Multiple radio buttons are integrated in the group by setting the data-role = "controlgroup" attribute in the fieldset. Automatically, the framework will set the corners round at the bottom and top corner, and remove all margins. By default, the radio is set vertically.

Example

Following example demonstrates the use of radio button vertically in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Vertical Group Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as radio_vertical_group.html file in your server root folder.
Open this HTML file as http://localhost/radio_vertical_group.html and the following output will be displayed.

jquery_mobile_widgets.htm