Menu
I used radio button in my jquery mobile application and i'm using jquery mobile 1.0 and jquery 1.6.4. The problem is it always aligned left. So, i tried to move at center but it is not working. How to fix this? Thanks in advance.
<div id="userOptionGroup" data-role="contain">
<fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;">
<input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser" checked="checked" />
<label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label>
<input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" />
<label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label>
</fieldset>
</div>
693
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . 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.
We can check the status of a radio button by using the :checked jQuery selector together with the jQuery function is . For example: $('#el').is(':checked') . It is exactly the same method we use to check when a checkbox is checked using jQuery.
The radio button is an HTML element that helps to take input from the user. Although it is hard to style the radio button, pseudo-elements makes it easier to style the radio button. Radio buttons are applied when there is the requirement of a single selection from a group of items.
Radio buttons allow a user to select a single option among multiple options. You can set the Choice Value of each option, for each button, as well as group these buttons by giving them the same Group Name. Radio buttons have Default styling.
You must wrap radiobuttons in a div with fixed width and margin set to auto on the fieldset. Here's how - of course it's neater to not use inline css.
<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center">
<div style="width: 200px; margin: 0 auto;">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">A</label>
<input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">B</label>
</div>
</fieldset>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
