jquery-mobile/docs/forms/forms-radiobuttons.html

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Radio Buttons</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../js/"></script>
	<script src="../docs/docs.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>Radio buttons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<form action="#" method="get">

		<h2>Radio buttons</h2>
		<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>
		
		<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. </p>
		
		<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>
		
		<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
				
<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
    &lt;fieldset data-role=&quot;controlgroup&quot;&gt;
    	&lt;legend&gt;Choose a pet:&lt;/legend&gt;
         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
         	&lt;label for=&quot;radio-choice-1&quot;&gt;Cat&lt;/label&gt;

         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot;  /&gt;
         	&lt;label for=&quot;radio-choice-2&quot;&gt;Dog&lt;/label&gt;

         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot;  /&gt;
         	&lt;label for=&quot;radio-choice-3&quot;&gt;Hamster&lt;/label&gt;

         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot;  /&gt;
         	&lt;label for=&quot;radio-choice-4&quot;&gt;Lizard&lt;/label&gt;
    &lt;/fieldset&gt;
&lt;/div&gt;
</code></pre>

		<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 fie.</p>
		
	<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>

	         	<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>

	         	<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4"  />
	         	<label for="radio-pet-4">Lizard</label>
	    </fieldset>
	</div>

			<h2>Horizontal radio button sets</h2>

			<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>

	<code>
	&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong> &gt;
	</code>

	<div data-role="fieldcontain">
	    <fieldset data-role="controlgroup" data-type="horizontal">
	     	<legend>Layout view:</legend>
	         	<input type="radio" name="radio-view" id="radio-view-a" value="list"  />
	         	<label for="radio-view-a">List</label>
	         	<input type="radio" name="radio-view" id="radio-view-b" value="grid"  />
	         	<label for="radio-view-b">Grid</label>
	         	<input type="radio" name="radio-view" id="radio-view-c" value="gallery"  />
	         	<label for="radio-view-c">Gallery</label>
	    </fieldset>
	</div>

				<p>The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.</p>
				

<h2>Refreshing a radio button</h2>
        
<p>If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>


<code>
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
</code>


	</form>
	
	
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
new forms docs 2010-10-14 21:41:38 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
Ya'll can scale your pages now. Fixes #1645. Note: we originally disabled user zooming to work around a bug in iOS that automatically zooms the page beyond the constraints of the viewport on orientation change. We are not working around this bug at all now, but you are free to include any meta tag you'd like, or better yet, consider this polyfill: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 2011-05-17 21:28:19 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
better page titles 2011-03-31 13:11:26 +00:00			`<title>jQuery Mobile Docs - Radio Buttons</title>`
Sweep through all files to add a trailing slash to <link> tags that include thems/default. This should fix Opera Mobile Issue 763. 2011-01-06 00:19:24 +00:00			`<link rel="stylesheet" href="../../themes/default/" />`
Added link to demo css file to all docs pages 2010-11-11 19:15:42 +00:00			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
been meaning to do this for a while. 2011-04-14 20:04:47 +00:00			`<script src="../../js/jquery.js"></script>`
			`<script src="../../js/"></script>`
			`<script src="../docs/docs.js"></script>`
new forms docs 2010-10-14 21:41:38 +00:00			`</head>`
			`<body>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="page">`
new forms docs 2010-10-14 21:41:38 +00:00
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="header" data-theme="b">`
new forms docs 2010-10-14 21:41:38 +00:00			`<h1>Radio buttons</h1>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>`
new forms docs 2010-10-14 21:41:38 +00:00			`</div><!-- /header -->`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="content">`
new forms docs 2010-10-14 21:41:38 +00:00
			`<form action="#" method="get">`

			`<h2>Radio buttons</h2>`
all new forms section with new demos and cleaned up code 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>`

			<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. </p>

			`<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>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
new forms docs 2010-10-14 21:41:38 +00:00			`<pre><code>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
			`<fieldset data-role="controlgroup">`
all new forms section with new demos and cleaned up code 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" />`
P free hamster. 2011-02-15 21:08:20 +00:00			`<label for="radio-choice-3">Hamster</label>`
all new forms section with new demos and cleaned up code 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>`
new forms docs 2010-10-14 21:41:38 +00:00			`</div>`
			`</code></pre>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +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 fie.</p>`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
			`<fieldset data-role="controlgroup">`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<legend>Choose a pet:</legend>`
made sure data-icon attrs work on radio and checks. Fixes #423, Fixes #424 2010-11-11 04:19:41 +00:00			`<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<label for="radio-pet-1">Cat</label>`
new forms docs 2010-10-14 21:41:38 +00:00
made sure data-icon attrs work on radio and checks. Fixes #423, Fixes #424 2010-11-11 04:19:41 +00:00			`<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<label for="radio-pet-2">Dog</label>`
new forms docs 2010-10-14 21:41:38 +00:00
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />`
P free hamster. 2011-02-15 21:08:20 +00:00			`<label for="radio-pet-3">Hamster</label>`
new forms docs 2010-10-14 21:41:38 +00:00
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />`
			`<label for="radio-pet-4">Lizard</label>`
new forms docs 2010-10-14 21:41:38 +00:00			`</fieldset>`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`</div>`
new forms docs 2010-10-14 21:41:38 +00:00
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<h2>Horizontal radio button sets</h2>`
new forms docs 2010-10-14 21:41:38 +00:00
changed the default namespace to "" and updated the docs/demos as such 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>`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
			`<code>`
Updated the radiobutton page to fix the sample code that showed two data-role attributes on a single element. 2011-04-28 21:29:37 +00:00			`<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong> >`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`</code>`
new forms docs 2010-10-14 21:41:38 +00:00
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
			`<fieldset data-role="controlgroup" data-type="horizontal">`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<legend>Layout view:</legend>`
made sure data-icon attrs work on radio and checks. Fixes #423, Fixes #424 2010-11-11 04:19:41 +00:00			`<input type="radio" name="radio-view" id="radio-view-a" value="list" />`
fixed a few form id's for better syntax 2010-11-10 19:57:48 +00:00			`<label for="radio-view-a">List</label>`
made sure data-icon attrs work on radio and checks. Fixes #423, Fixes #424 2010-11-11 04:19:41 +00:00			`<input type="radio" name="radio-view" id="radio-view-b" value="grid" />`
fixed a few form id's for better syntax 2010-11-10 19:57:48 +00:00			`<label for="radio-view-b">Grid</label>`
made sure data-icon attrs work on radio and checks. Fixes #423, Fixes #424 2010-11-11 04:19:41 +00:00			`<input type="radio" name="radio-view" id="radio-view-c" value="gallery" />`
fixed a few form id's for better syntax 2010-11-10 19:57:48 +00:00			`<label for="radio-view-c">Gallery</label>`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`</fieldset>`
			`</div>`
Updated the radiobutton page to fix the sample code that showed two data-role attributes on a single element. 2011-04-28 21:29:37 +00:00
			`<p>The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.</p>`


all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
fixed a few form id's for better syntax 2010-11-10 19:57:48 +00:00
Added documentation to explain how to use the refresh method on many form elements when you manipulate them. This will hopefully help a lot of people who were confused by this! 2011-03-14 02:16:13 +00:00

			`<h2>Refreshing a radio button</h2>`

			`<p>If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>`


			`<code>`
			`$("input[type='radio']").attr("checked",true).checkboxradio("refresh");`
			`</code>`


new forms docs 2010-10-14 21:41:38 +00:00			`</form>`

all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
new forms docs 2010-10-14 21:41:38 +00:00			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`