How to make Mini Horizontal Checkbox Controlgroups using jQuery Mobile ?

Last Updated : 14 Dec, 2020

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= 
"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> 
</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= 
"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> 
</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> 