Skip to content
Related Articles

Related Articles

How to make Mini Horizontal Checkbox Controlgroups using jQuery Mobile ?

Improve Article
Save Article
  • Last Updated : 14 Dec, 2020
Improve Article
Save Article

The jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. Mini Horizontal Checkbox Controlgroups button can be easily made using jQuery Mobile.

Including Scripts: You can add jQuery mobile scripts into your project by adding these tags into your <head> tag.

<link rel=”stylesheet”
href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
  
    <script src=
    </script>
  
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h4>
            Mini Horizontal Checkbox 
            using jQuery Mobile
        </h4>
    </center>
  
    <fieldset data-role="controlgroup" 
        data-type="horizontal" data-mini="true">
        <legend>GeeksforGeeks</legend>
          
        <input type="checkbox" name="gfg" id="gfg1">
        <label for="gfg1">Geeks1</label>
          
        <input type="checkbox" name="gfg" id="gfg2">
        <label for="gfg2">Geeks2</label>
          
        <input type="checkbox" name="gfg" id="gfg3">
        <label for="gfg3">Geeks3</label>
    </fieldset>
</body>
  
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
  
    <script src=
    </script>
  
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
  
    <fieldset data-role="controlgroup" 
        data-type="horizontal" data-mini="true" 
        style="margin: auto; width: 400px;">
        <legend>Menubar</legend>
          
        <input type="checkbox" name="gfg" id="gfg1">
        <label for="gfg1">Settings</label>
          
        <input type="checkbox" name="gfg" id="gfg2">
        <label for="gfg2">About</label>
          
        <input type="checkbox" name="gfg" id="gfg3">
        <label for="gfg3">Singup</label>
          
        <input type="checkbox" name="gfg" id="gfg4">
        <label for="gfg4">Login</label>
          
        <input type="checkbox" name="gfg" id="gfg5">
        <label for="gfg5">News</label>
          
        <input type="checkbox" name="gfg" id="gfg6">
        <label for="gfg6">Blogs</label>
    </fieldset>
</body>
  
</html>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!