jQuery Mobile - Checkbox Vertical group


Multiple checkbox is grouped 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 it will remove all margins. By default, the checkbox is set vertically.


Following example demonstrates the use of vertical group checkbox in the jQuery Mobile.

<!DOCTYPE html>
      <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>

      <h2>Vertical Group Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "checkbox" id = "checkbox 1" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" />
            <label for = "checkbox 3">Checkbox 3</label>


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

  • Save the above html code as vertical_group.html file in your server root folder.

  • Open this HTML file as http://localhost/vertical_group.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started