Grouping radio buttons in a grid
The jQuery Mobile framework allows you to create radio buttons grouped either horizontally or vertically. This recipe shows you how to group radio controls in a 3 x 3 grid in a simple seat reservation form.
Getting ready
Copy the full code of this recipe from the code/05/radiobutton-grid
sources folder. This code can be launched using the URL http://localhost:8080/05/radiobutton-grid/main.html
.
How to do it...
In
main.html
, create nine radio controls using a 3 x 3 layout grid. These radio buttons are part of the same control group.<form action='#' method='post'> <fieldset data-role='controlgroup' data-type='horizontal' class='ui-grid-a'> <div class='ui-block-a' style='width: 30%'> <legend>First Row</legend></div> <div class='ui-block-b' style='width: 70%'> <input type='radio' name='radio-1' id='radio-11' value='Seat-A1' checked /> <label for='radio-11'>A-1</label>...