How to make Horizontal checkbox controlgroups using jQuery Mobile ? Last Updated : 10 Dec, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a horizontal checkbox control button groups using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <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> Horizontal Checkbox using jQuery Mobile </h4> </center> <fieldset data-role="controlgroup" data-type="horizontal"> <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> <h4> Horizontal Checkbox using jQuery Mobile </h4> </center> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>GeeksforGeeks</legend> <input type="checkbox" name="gfg" id="gfg1"> <label for="gfg1">first</label> <input type="checkbox" name="gfg" id="gfg2"> <label for="gfg2">second</label> <input type="checkbox" name="gfg" id="gfg3"> <label for="gfg3">Third</label> </fieldset> </body> </html> Output: Comment More infoAdvertise with us Next Article How to make a Mini sized horizontal controlgroups using jQuery Mobile? T taran910 Follow Improve Article Tags : JQuery HTML-Misc jQuery-Misc Similar Reads How to make Mini Horizontal Checkbox Controlgroups using jQuery Mobile ? 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 1 min read How to make a horizontal controlgroup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making a horizontal controlgroups using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=" 2 min read How to make Horizontal Radio button controlgroups using jQuery Mobile? To create horizontal radio button control groups using jQuery Mobile, utilize the data-type="horizontal" attribute. This configuration arranges radio buttons horizontally instead of vertically, enhancing the layout and user interaction of forms in web applications. ApproachCSS and jQuery CDN are lin 2 min read How to make a Mini sized horizontal controlgroups using jQuery Mobile? To use jQuery Mobile, a web-based technology for creating responsive content, to create mini-sized horizontal control groups. This will enhance your user interface with a sleek and compact design for all devices. Example 1: The example below shows the jQuery Mobile to create a mini-sized horizontal 2 min read How to make Mini Vertical checkbox controlgroups using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a mini vertical checkbox control groups button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project 1 min read How to create Vertical checkbox controlgroups using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Vertical checkbox controlgroups button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. 1 min read Like