How to make vertical Radio button controlgroups using jQuery Mobile? Last Updated : 25 Jun, 2024 Comments Improve Suggest changes Like Article Like Report To create vertical radio button control groups using jQuery Mobile, you would utilize the framework's markup structure and styling classes. This ensures compatibility with mobile devices and enhances user interaction by presenting options in a stacked format. Example 1: The approach below shows how to make a vertical Radio button controlgroups using jQuery Mobile. 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> Vertical Radio button using jQuery Mobile </h4> </center> <fieldset data-role="controlgroup"> <legend>GeeksforGeeks</legend> <input type="radio" name="gfg" id="gfg1" value="on"> <label for="gfg1">first</label> <input type="radio" name="gfg" id="gfg2" value="off" checked="checked"> <label for="gfg2">second</label> <input type="radio" name="gfg" id="gfg3" value="other"> <label for="gfg3">Third</label> </fieldset> </body> </html> Output: OutputExample 2: The approach below shows how to make vertical Radio button controlgroups using jQuery Mobile. 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> <h4> Vertical Radio button using jQuery Mobile </h4> </center> <fieldset data-role="controlgroup"> <legend>Below are thw radio buttons</legend> <input type="radio" name="gfg" id="gfg1" value="on" checked="checked"> <label for="gfg1">Geeks1</label> <input type="radio" name="gfg" id="gfg2" value="off"> <label for="gfg2">Geeks2</label> <input type="radio" name="gfg" id="gfg3" value="other"> <label for="gfg3">Geeks3</label> </fieldset> </body> </html> Output: Output Comment More infoAdvertise with us Next Article How to make a vertical controlgroup using jQuery Mobile? T taran910 Follow Improve Article Tags : JQuery HTML-Misc jQuery-Misc HTML-Questions jQuery-Questions +1 More Similar Reads How to make Mini vertical Radio button 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 mini vertical radio button control groups button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your proje 1 min read How to make a vertical controlgroup using jQuery Mobile? jQuery Mobile is a web-based technology designed to create responsive content accessible on all smartphones, tablets, and desktops. In this article, we'll guide you through creating vertical control groups using jQuery Mobile, enhancing your user interface with an organized and user-friendly layout. 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 vertical 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 Mini sized vertical controlgroups using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <l 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 make Vertical Selects controlgroup using jQuery Mobile? To create a Vertical Selects control group using jQuery Mobile, you utilize its framework designed for responsive web content across various devices, ensuring seamless interaction and accessibility on smartphones, tablets, and desktops alike. Example 1: The example below shows how to make a Vertical 1 min read Like