2010-10-14 21:41:38 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-03-31 13:11:26 +00:00
< title > jQuery Mobile Docs - Radio Buttons< / title >
2011-10-17 20:51:45 +00:00
< link rel = "stylesheet" href = "../../../css/themes/default/" / >
2011-08-03 18:25:52 +00:00
< link rel = "stylesheet" href = "../../_assets/css/jqm-docs.css" / >
< script src = "../../../js/jquery.js" > < / script >
< script src = "../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
2011-12-14 23:31:33 +00:00
< script data-main = "../../../js/jquery.mobile.docs" src = "../../../external/require.js" > < / script >
2010-10-14 21:41:38 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2010-10-14 21:41:38 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2010-10-14 21:41:38 +00:00
< h1 > Radio buttons< / h1 >
2011-07-29 20:59:06 +00:00
< a href = "../../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-14 21:41:38 +00:00
< / div > <!-- /header -->
2011-03-10 03:36:14 +00:00
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2010-10-14 21:41:38 +00:00
< form action = "#" method = "get" >
< h2 > Radio buttons< / h2 >
2011-07-29 20:59:06 +00:00
< ul data-role = "controlgroup" data-type = "horizontal" class = "localnav" >
< li > < a href = "index.html" data-role = "button" data-transition = "fade" class = "ui-btn-active" > Basics< / a > < / li >
< li > < a href = "options.html" data-role = "button" data-transition = "fade" > Options< / a > < / li >
< li > < a href = "methods.html" data-role = "button" data-transition = "fade" > Methods< / a > < / li >
< li > < a href = "events.html" data-role = "button" data-transition = "fade" > Events< / a > < / li >
< / ul >
2010-10-15 00:28:22 +00:00
< p > Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the < code > label< / code > for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.< / p >
2011-11-14 02:13:53 +00:00
< p > Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the < a href = "../../api/data-attributes.html" > data- attribute reference< / a > to see all the possible attributes you can add to radio buttons.< / p >
2010-10-15 00:28:22 +00:00
< h2 > Vertically grouped radio buttons< / h2 >
< p > To create a set of radio buttons, add an < code > input< / code > with a < code > type="radio"< / code > attribute and a corresponding < code > label< / code > . Set the < code > for< / code > attribute of the < code > label< / code > to match the ID of the < code > input< / code > so they are semantically associated.< / p >
< p > Because radio buttons use the < code > label< / code > element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a < code > fieldset< / code > element that has a < code > legend< / code > which acts as the title for the question.< / p >
2011-10-14 19:59:55 +00:00
< p > To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a < code > data-role="controlgroup"< / code > attribute on the container.< / p >
2010-10-15 00:28:22 +00:00
2010-10-14 21:41:38 +00:00
< pre > < code >
2011-10-14 19:59:55 +00:00
< strong > < fieldset data-role=" controlgroup" >
< legend> Choose a pet:< /legend> < / strong >
< input type=" radio" name=" radio-choice-1" id=" radio-choice-1" value=" choice-1" checked=" checked" />
< label for=" radio-choice-1" > Cat< /label>
< input type=" radio" name=" radio-choice-1" id=" radio-choice-2" value=" choice-2" />
< label for=" radio-choice-2" > Dog< /label>
< input type=" radio" name=" radio-choice-1" id=" radio-choice-3" value=" choice-3" />
< label for=" radio-choice-3" > Hamster< /label>
< input type=" radio" name=" radio-choice-1" id=" radio-choice-4" value=" choice-4" />
< label for=" radio-choice-4" > Lizard< /label>
< strong > < /fieldset> < / strong >
< / code > < / pre >
< p > This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.< / p >
< fieldset data-role = "controlgroup" >
< legend > Choose a pet:< / legend >
< input type = "radio" name = "radio-pet-1a" id = "radio-pet-1a" value = "choice-1" checked = "checked" / >
< label for = "radio-pet-1a" > Cat< / label >
< input type = "radio" name = "radio-pet-1a" id = "radio-pet-2a" value = "choice-2" / >
< label for = "radio-pet-2a" > Dog< / label >
< input type = "radio" name = "radio-pet-1a" id = "radio-pet-3a" value = "choice-3" / >
< label for = "radio-pet-3a" > Hamster< / label >
< input type = "radio" name = "radio-pet-1a" id = "radio-pet-4a" value = "choice-4" / >
< label for = "radio-pet-4a" > Lizard< / label >
< / fieldset >
< pre > < code >
< strong > < div data-role=" fieldcontain" >
< / strong > < fieldset data-role=" controlgroup" >
2010-10-15 00:28:22 +00:00
< legend> Choose a pet:< /legend>
< input type=" radio" name=" radio-choice-1" id=" radio-choice-1" value=" choice-1" checked=" checked" />
< label for=" radio-choice-1" > Cat< /label>
< input type=" radio" name=" radio-choice-1" id=" radio-choice-2" value=" choice-2" />
< label for=" radio-choice-2" > Dog< /label>
< input type=" radio" name=" radio-choice-1" id=" radio-choice-3" value=" choice-3" />
2011-02-15 21:08:20 +00:00
< label for=" radio-choice-3" > Hamster< /label>
2010-10-15 00:28:22 +00:00
< input type=" radio" name=" radio-choice-1" id=" radio-choice-4" value=" choice-4" />
< label for=" radio-choice-4" > Lizard< /label>
< /fieldset>
2011-10-14 19:59:55 +00:00
< strong > < /div>
< / strong > < / code > < / pre >
2010-10-14 21:41:38 +00:00
2011-10-14 19:59:55 +00:00
< p > To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a < code > data-role="controlgroup"< / code > attribute on the container.< / p >
2010-10-14 21:41:38 +00:00
2011-10-14 19:59:55 +00:00
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" >
< legend > Choose a pet:< / legend >
< input type = "radio" name = "radio-pet-1" id = "radio-pet-1" value = "choice-1" checked = "checked" / >
< label for = "radio-pet-1" > Cat< / label >
2010-10-14 21:41:38 +00:00
2011-10-14 19:59:55 +00:00
< input type = "radio" name = "radio-pet-1" id = "radio-pet-2" value = "choice-2" / >
< label for = "radio-pet-2" > Dog< / label >
< input type = "radio" name = "radio-pet-1" id = "radio-pet-3" value = "choice-3" / >
< label for = "radio-pet-3" > Hamster< / label >
2010-10-14 21:41:38 +00:00
2011-10-14 19:59:55 +00:00
< input type = "radio" name = "radio-pet-1" id = "radio-pet-4" value = "choice-4" / >
< label for = "radio-pet-4" > Lizard< / label >
< / fieldset >
< / div >
2010-10-15 00:28:22 +00:00
< h2 > Horizontal radio button sets< / h2 >
2010-10-14 21:41:38 +00:00
2011-03-10 03:36:14 +00:00
< p > Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the < code > data-type="horizontal"< / code > to the < code > fieldset< / code > .< / p >
2010-10-15 00:28:22 +00:00
< code >
2011-04-28 21:29:37 +00:00
< fieldset data-role=" controlgroup" < strong > data-type=" horizontal" < / strong > >
2010-10-15 00:28:22 +00:00
< / code >
2010-10-14 21:41:38 +00:00
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" data-type = "horizontal" >
2010-10-15 00:28:22 +00:00
< legend > Layout view:< / legend >
2010-11-11 04:19:41 +00:00
< input type = "radio" name = "radio-view" id = "radio-view-a" value = "list" / >
2010-11-10 19:57:48 +00:00
< label for = "radio-view-a" > List< / label >
2010-11-11 04:19:41 +00:00
< input type = "radio" name = "radio-view" id = "radio-view-b" value = "grid" / >
2010-11-10 19:57:48 +00:00
< label for = "radio-view-b" > Grid< / label >
2010-11-11 04:19:41 +00:00
< input type = "radio" name = "radio-view" id = "radio-view-c" value = "gallery" / >
2010-11-10 19:57:48 +00:00
< label for = "radio-view-c" > Gallery< / label >
2010-10-15 00:28:22 +00:00
< / fieldset >
< / div >
2011-04-28 21:29:37 +00:00
2011-10-14 19:59:55 +00:00
< p > The framework will float the labels so they sit side-by-side on a line, hides the radio button icons and only round the left and right edges of the group.< / p >
2011-04-28 21:29:37 +00:00
2010-10-15 00:28:22 +00:00
2011-03-14 02:16:13 +00:00
2010-10-14 21:41:38 +00:00
< / form >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
2011-09-29 20:35:31 +00:00
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" data-content-theme = "d" >
2011-06-20 20:35:27 +00:00
2011-06-20 22:23:09 +00:00
< h3 > More in this section< / h3 >
2011-06-20 20:35:27 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-06-20 21:17:04 +00:00
< li data-role = "list-divider" > Form elements< / li >
2011-07-29 20:59:06 +00:00
< li > < a href = "../docs-forms.html" > Form basics< / a > < / li >
< li > < a href = "../forms-all.html" > Form element gallery< / a > < / li >
2011-09-28 15:01:20 +00:00
< li > < a href = "../textinputs/index.html" > Text inputs< / a > < / li >
2011-09-29 14:52:58 +00:00
< li > < a href = "../search/" > Search input< / a > < / li >
< li > < a href = "../slider/" > Slider< / a > < / li >
< li > < a href = "../switch/" > Flip toggle switch< / a > < / li >
2011-07-29 20:59:06 +00:00
< li data-theme = "a" > < a href = "index.html" > Radio buttons< / a > < / li >
2011-09-29 14:52:58 +00:00
< li > < a href = "../checkboxes/" > Checkboxes< / a > < / li >
< li > < a href = "../selects/" > Select menus< / a > < / li >
2011-07-29 20:59:06 +00:00
< li > < a href = "../forms-themes.html" > Theming forms< / a > < / li >
< li > < a href = "../forms-all-native.html" > Native form elements< / a > < / li >
< li > < a href = "../forms-sample.html" > Submitting forms< / a > < / li >
2011-09-29 15:33:32 +00:00
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
2011-06-20 22:50:52 +00:00
< p > © 2011 The jQuery Project< / p >
2011-06-20 20:35:27 +00:00
< / div >
2010-10-15 00:28:22 +00:00
2010-10-14 21:41:38 +00:00
< / div > <!-- /page -->
< / body >
2011-06-20 20:35:27 +00:00
< / html >
