Rectangle 27 11

<div data-role="page" id="radio-icons"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <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"><img src="http://cdn2.iconfinder.com/data/icons/Snow/Snow/snow/Cat.png" /></label>

                     <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2"><img src="http://images.findicons.com/files/icons/8/dog/48/48_dog4.png" /></label>

                     <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                <label for="radio-choice-3"><img src="http://icon.downv.com/32x32/5/142/1070746.0048c51761d5b53e5a2297e458ba0ff7.gif" /></label>

                     <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
                    <label for="radio-choice-4"><img src="http://cdn6.droidmill.com/media/market-media/com.tinyminds.android.widgets.lizardbattery_icon.png" /></label>
            </fieldset>
        </div>
    </div>
</div>

i love you man! this works perfectly! i never thought that its as easy as this! thanks again and best regards!

jquery mobile radio button icon - Stack Overflow

icons radio-button jquery-mobile
Rectangle 27 4

<form>
    <fieldset data-role="controlgroup" data-type="horizontal" id="custom-fieldset">
        <legend>Horizontal:</legend>
        <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio"/>
        <label for="radio-choice-h-2a">One</label>
        <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio"/>
        <label for="radio-choice-h-2b">Two</label>
        <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio"/>
        <label for="radio-choice-h-2c">Three</label>
    </fieldset>
</form>
<fieldset data-role="controlgroup" id="custom-fieldset"> 
    <legend>Were you able to complete your visit today?</legend>
    <label for="radio_1134198__4516395">Yes</label>
    <input type="radio" id="radio_1134198__4516395" name="sdid_1134198" value="radio_1134198__4516395"/>
</fieldset>
#custom-fieldset div .ui-radio label span .ui-icon-radio-on {
    background-color: red !important;
}

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

css - jQuery Mobile : How to change Radio button active state color - ...

jquery css jquery-mobile jquery-mobile-fieldset jquery-mobile-radio
Rectangle 27 8

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>

Radio button not align properly at center in jquery mobile version 1.0...

jquery jquery-ui html5 jquery-mobile radio-button
Rectangle 27 1

you need to over-write this class in your custom css file

.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {
    left: 303px;// can vary according to your lay out
}

or you can define your own class which will over write above property...something like this-

.leftAlign{left: 303px;}

then assign this class to the span which contains the customized radion button using jquery...

:i tried this but not working.

this is not centering the buttons, only moving the left-margin. There should be a solution to center the radio buttons.

Radio button not align properly at center in jquery mobile version 1.0...

jquery jquery-ui html5 jquery-mobile radio-button
Rectangle 27 1

I try too much and finaly 1st Answer of this question resolve my problem. Its look like fix to jquery mobile bug but it should be handle properly without doing such patch work :). Thanks Hampus.

Radio button not align properly at center in jquery mobile version 1.0...

jquery jquery-ui html5 jquery-mobile radio-button
Rectangle 27 6

I assume you want the CSS the get the controlgroup looking like the image ?

If so, here is your HTML with all styles removed and some typos fixed:

<div id="myGroup" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"   data-type="horizontal"  data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
        <legend ></legend>
        <input type="radio" name="radio-strength" id="radio-view-a" value="" class="blabla" style="background-color: #BF8F54;"/>
        <label for="radio-view-a" >: 10.50 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="" checked="checked"/>
        <label for="radio-view-b" >: 6.30 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value=""  />
        <label for="radio-view-c" >: 5.70 &#8362;</label>
    </fieldset>
</div>

I added an ID to the fieldcontain so we could limit the CSS rules to things in this container:

#myGroup {
    font-size: 84%;
}
#myGroup .ui-controlgroup-label{
    float: none;
    display: block;
    text-align: center;
    width: 100%;
}
#myGroup .ui-controlgroup-label legend{
    font-weight: bold;
    font-size: 130%;   
    width: 100%;
    margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
    float: none; 
    display: block;
    width: 100%;
}
#myGroup .ui-radio{
    width: 33.33%;
}
#myGroup .ui-radio label{
    text-align: center;
    white-space: nowrap;
}

You're a genius! Thank you 99.9% :) I only have a small problem now that the text gets cut off because of the "noweap". (it makes a '...' instead of the text... How can I get the text to automatically resize to fit the width of the button - in a way that all the three buttons have the same font size but according to the "longest text" if I am clear enough....

You're a righteous person. If I had a daughter I would have made her marry you. Again, thank you very much for your help. I saw the example you uploaded to the jsfiddle and it's exactly what I want. for some reason, although I've copy-pasted the @media code from your example, it doesn't work in my browsers (chrome,firefox). Don't know the reason. In any case, Thank you very much!

For me the media queries work in both Chrome and Firefox. Good luck!

You saved an hour, thanks...

jquery mobile radio button group to fit 100% of width - Stack Overflow

jquery-mobile
Rectangle 27 1

radio button
checkboxes
.ui-controlgroup-label {
    width: 100% !important;
}

How so? It is working in an example. Your solution has a problem, while label is indeed 100% of a page label text is still 20% of a available page. This example is made in jQuery Mobile 1.3.1

css - jQuery Mobile radio buttons use fieldset and legend - Stack Over...

css jquery-mobile jquery-mobile-fieldset jquery-mobile-radio
Rectangle 27 3

What I did in the end was -

(1) Set the radio button-containing div to visibility: hidden in the CSS.

(2) Find the widths of each radio button and add them together.

(3) Set the width of the radio button-containing div to the total width.

(4) Chain a change of the visibility property onto (3).

#viewselector{
    margin: 0 auto;
    text-align: center;
    visibility: hidden;
}

The code to do (1) to (4) is as follows -

$(document).ready(function(){

    var idealwidth = 0

    $(".ui-radio").each(function(){
        idealwidth = idealwidth + $(this).width();
    });

    $("#viewselector").width(idealwidth).css('visibility','visible');

});

css - How do I center a set of JQuery Mobile radio buttons in the view...

css jquery-mobile cordova radio-button centering
Rectangle 27 3

What I did in the end was -

(1) Set the radio button-containing div to visibility: hidden in the CSS.

(2) Find the widths of each radio button and add them together.

(3) Set the width of the radio button-containing div to the total width.

(4) Chain a change of the visibility property onto (3).

#viewselector{
    margin: 0 auto;
    text-align: center;
    visibility: hidden;
}

The code to do (1) to (4) is as follows -

$(document).ready(function(){

    var idealwidth = 0

    $(".ui-radio").each(function(){
        idealwidth = idealwidth + $(this).width();
    });

    $("#viewselector").width(idealwidth).css('visibility','visible');

});

css - How do I center a set of JQuery Mobile radio buttons in the view...

css jquery-mobile cordova radio-button centering
Rectangle 27 2

Not a super clean solution, but this might work for you: DEMO FIDDLE

I am using some absolute positioning in CSS to achive the stretching of the middle button while keeping the radios at extreme left and right. You can play with the actual css values to make them work for your exact buttons:

<div data-role="controlgroup" data-type="horizontal" class="TheContainer">
    <input type="radio" name="radio-choice-b" id="radio-choice-c" value="list" checked="checked" data-corners="none" />
    <label for="radio-choice-c">Left</label> 

    <a data-role="button" class="midButton" data-role="button" data-corners="false">stretch to the page width?</a> 

    <input type="radio" name="radio-choice-b" id="radio-choice-e" value="gallery" />
    <label for="radio-choice-e">Right</label>
</div>

.TheContainer {
    height: 20px;
}
.TheContainer .midButton {
    position: absolute;
    top: 7px;
    left: 87px;
    right: 87px;
}
.TheContainer .ui-radio {
    position: absolute;
    top: 7px;
    margin-left: 15px;
    margin-right: 15px;
}
.TheContainer .ui-radio:first-child {
    left: 0px;
}
.TheContainer .ui-radio:last-child {
    right: 0px;
}

Almost exactly what I'm looking for - thank you. Only niggle would be the LI height being a bit big.

Here is an update with smaller LI: jsfiddle.net/9LqeF/2

css3 - Radio buttons either side of JQuery Mobile Listview - Stack Ove...

jquery css3 jquery-mobile radio-button
Rectangle 27 2

I have an issue that my values are dynamic... I need to figure out a better solution to this issue.

Perhaps using a combination of data attributes and classes with the jquery.data and jquery.on would solve what you need. For example: <input type="radio" class="myradios" data-myid="1" ...> $(document).ready(function () { $(".myradios").on("mousedown touchstart MozTouchDown", function() {alert($(this).data("myid");} ); });

javascript - jQuery Mobile radio button, problems with onclick event? ...

javascript jquery jquery-mobile
Rectangle 27 1

Is this what you are looking for?

<div data-role="content">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td><input type="radio" name="radioleast" id="radio-l1"/></td>
                <td><label for="radio-l1" id="desc-l1" ><span style="display: block;" class="ui-icon ui-icon-check">where is this</span></label></td>
                <td align="center"><span data-role="button" style="display:block; width:100%; margin: 0 auto;">How can I get this to stretch to the page width?</span></td>
                <td><label for="radio-l4" id="desc-l1"><span style="display: block;" class="ui-icon ui-icon-check">what is this</span></label></td>
                <td><input type="radio" name="radioleast" id="radio-l4" style="float:right;" /></td>
              </tr>
            </table>
          </fieldset>
        </div>

Sort of, but I'm looking to insert text or a button between the left/right radios. Have updated my original question above.

Just changed the coding.. hope it is more like what you want..

css3 - Radio buttons either side of JQuery Mobile Listview - Stack Ove...

jquery css3 jquery-mobile radio-button
Rectangle 27 6

Use a change event instead of a click event.

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('change', '[type="radio"]', function(){ 
        alert('Change');
    });    
});

No downvote for this but the link and example are very vague (although accurate). It just so happens that this is the first stackoverflow result that comes up from a google search on this topic. Could be much better.

jquery mobile radio buttons onclick event - Stack Overflow

jquery jquery-mobile
Rectangle 27 4

Following styles should do the trick:

.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
    background-color:red;
}
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
    background-color:red;
}

Thanks, but I use this in my fieldset: <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" > The icons in the buttons will therefore disappear and the buttons will turn blue when they are clicked. Im sorry that I didn't give this information, I thought it wouldn't mather.

Are you able to update this code to work with Jquerymobile 1.4.2 please? as you can see it no longer works (jsfiddle.net/vt2870vp)

different colors on radio buttons when they are active in Jquery mobil...

jquery-mobile
Rectangle 27 7

To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.

The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.

input[type="radio"] {
    display: none;
}
.ui-radio label {
    height:56px;
    line-height: 56px;
    padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
    background-image: none;
    width: 26px;
    height: 26px;
    border: 2px solid #6E7983;
    margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
    background-color: #86D51C;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    margin-left: 10px;
    border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
    content:"";
    position: absolute;
    display: block;
    border: 2px solid #6E7983;
    border-radius: 50%;
    background-color: transparent;
    width: 26px;
    height: 26px;
    margin-top: 14px;
    margin-left: -39px;
}

@ezankerOh they look amazing and native Thank you very very much..

you are welcome.

@ezankerI have been asked to change the background color of radios at off state to white I have done that jsfiddle.net/8jzjy/17 but the problem is that the white color is not strong , it appears as it mixed with the page background color How can we solve this issue so the white color be more strong?

@ezankerPlease Can you help me in solving this issue ?

css - changing the Style of Radio buttons in jQuery mobile 1.4.0 - Sta...

css jquery-mobile jquery-mobile-radio
Rectangle 27 3

Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.

$('#select_part_quality_repair').val('').selectmenu('refresh');

This will deselect any option and then refresh the layout to show the change..

$(<radio-button-selector>).checkboxradio("refresh");

javascript - Clear all option select entries by clicking radio button ...

javascript jquery html jquery-mobile
Rectangle 27 3

Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.

$('#select_part_quality_repair').val('').selectmenu('refresh');

This will deselect any option and then refresh the layout to show the change..

$(<radio-button-selector>).checkboxradio("refresh");

javascript - Clear all option select entries by clicking radio button ...

javascript jquery html jquery-mobile
Rectangle 27 4

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
                    <thead>
                        <tr>                        
                            <th data-priority="1">Movie Title</th>                            
                            <th data-priority="2">Rank</th>
                            <th data-priority="4">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="5">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>                            
                            <td>1</td>
                            <td>1941</td>
                            <td>100%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>                            
                            <td>2</td>
                            <td>1942</td>
                            <td>97%</td>
                            <td>64</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>                            
                            <td>3</td>
                            <td>1972</td>
                            <td>97%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>                            
                            <td>4</td>
                            <td>1939</td>
                            <td>96%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>                            
                            <td>5</td>
                            <td>1962</td>
                            <td>94%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>                            
                            <td>6</td>
                            <td>1964</td>
                            <td>92%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>                            
                            <td>7</td>
                            <td>1967</td>
                            <td>91%</td>
                            <td>122</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>                            
                            <td>8</td>
                            <td>1939</td>
                            <td>90%</td>
                            <td>72</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>                            
                            <td>9</td>
                            <td>1952</td>
                            <td>89%</td>
                            <td>85</td>
                        </tr>
                        <tr>
                            <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>                            
                            <td>10</td>
                            <td>2010</td>
                            <td>84%</td>
                            <td>78</td>
                        </tr>
                    </tbody>
                </table>
                <table data-role="table" id="table-test" data-mode="columntoggle" class="ui-responsive table-stroke">
                    <thead>
                        <tr>                        
                            <th data-priority="1">Movie Title</th>                            
                            <th data-priority="2">Rank</th>
                            <th data-priority="4">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="5">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>                            
                            <td>1</td>
                            <td>1941</td>
                            <td>100%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>                            
                            <td>2</td>
                            <td>1942</td>
                            <td>97%</td>
                            <td>64</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>                            
                            <td>3</td>
                            <td>1972</td>
                            <td>97%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>                            
                            <td>4</td>
                            <td>1939</td>
                            <td>96%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>                            
                            <td>5</td>
                            <td>1962</td>
                            <td>94%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>                            
                            <td>6</td>
                            <td>1964</td>
                            <td>92%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>                            
                            <td>7</td>
                            <td>1967</td>
                            <td>91%</td>
                            <td>122</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>                            
                            <td>8</td>
                            <td>1939</td>
                            <td>90%</td>
                            <td>72</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>                            
                            <td>9</td>
                            <td>1952</td>
                            <td>89%</td>
                            <td>85</td>
                        </tr>
                        <tr>
                            <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>                            
                            <td>10</td>
                            <td>2010</td>
                            <td>84%</td>
                            <td>78</td>
                        </tr>
                    </tbody>
                </table>                
            </div>
        </div>    
    </body>
</html>
$(document).on('pagebeforeshow', '.ui-page', function(){ 
    alterTablePopup('table-column-toggle', 0);
    alterTablePopup('table-alt',0);    
});

function alterTablePopup(tableID, showColumnID) {    
    if($.mobile.activePage.find('#'+tableID).length > 0) {
        // First unsellect everything, we must trigger click event so table look could change  
        cleanTableColumns(showColumnID, tableID);

        $(document).on('popupafteropen', '#' + tableID + '-popup',function(event, ui) {
            var popup = $(this);        

            //Hide old fieldset
            popup.find('fieldset').hide();
            $.mobile.activePage.find('#radio-fieldset').remove();

            $('<fieldset>').attr({'data-role':'controlgroup','id':'radio-fieldset'}).appendTo(popup);
            popup.find('input').each(function(i){            
                (i === showColumnID) ?   $('<input>').attr({'name': tableID+'-radio','id': tableID+'-radio-'+i,'type':'radio','value':'v'+i,'checked':'checked','class':tableID+'-radio'}).appendTo('#radio-fieldset') :  $('<input>').attr({'name':tableID+'-radio','id':tableID+'-radio-'+i,'type':'radio','value':'v'+i}).appendTo('#' + tableID + '-popup #radio-fieldset');           

                $('<label>').attr({'for':tableID+'-radio-'+i}).text($(this).prev().find('.ui-btn-text').text()).appendTo('#' + tableID + '-popup #radio-fieldset'); 
            }); 
            $('[type="radio"]').checkboxradio();
            $.mobile.activePage.trigger('create');
        }); 

        $(document).on('popupafterclose', '#' + tableID + '-popup',function(event, ui) {
            var popup = $(this);  

            $.mobile.activePage.find('#radio-fieldset').remove();
            popup.find('fieldset').show();        
        });

        $(document).on('vmouseup', '#' + tableID + '-popup #radio-fieldset .ui-controlgroup-controls .ui-radio', function(e){ 
            if(e.handled !== true) // This will prevent event triggering more then once
            {        
                var selectedRadio = $(this).find('[type="radio"]').attr('id').replace(tableID+"-radio-","");
                cleanTableColumns(selectedRadio, tableID);
                e.handled = true;
            }    
        });     
    }
} 

function cleanTableColumns(columnNo, tableID){
    $('#' + tableID + '-popup').find('.ui-checkbox label').each(function(i){
        ($(this).hasClass('ui-checkbox-on')) ? $(this).trigger('vclick') : ''; // Unselect every selected field
        (i == columnNo) ? $(this).trigger('vclick') : ''; // select first for further use       
    });  
}

such a professional answer, thanks a lot... but its not working properly, i think when you click second time the popup does'nt appear... and what if their are more than one tables in a page...?

You really need to have patience :) Example is fixed, you can even create a plugin out of it.

may be you should guide me for that...

take a look how the popup appears in iphone... i.imgur.com/q7GTjcL.jpg

Use radio buttons instead of Checkbox popup in Jquery Mobile Table - S...

jquery jquery-mobile jquery-mobile-checkbox jquery-mobile-radio jquery-mobile-table
Rectangle 27 3

And this version should work on touch devices and desktop browsers alike: http://jsfiddle.net/Gajotres/779Kn/21/

Click event was changed to touchstart event, and now it also works on mobile devices.

$(document).on('pagebeforeshow', '#index', function(){     
    $('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
    $('input[type="radio"]').each(function(){        
        ($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
    });

    $(document).on('touchstart', '.ui-radio', function(){      
        $('input[type="radio"]').each(function(){  
            $(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
        }); 

        if($(this).find('input[type="radio"]').is(':checked')){
           $(this).find('label div.checkBox').removeClass('checked').addClass('not-checked'); 
           $(this).find('input[type="radio"]').attr('checked' , false);
        } else {
           $(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');             
           $(this).find('input[type="radio"]').attr('checked' , true);
        }        
    });   
});

Thank you! Thank you! Thank you! Thank you! really appriceate your help mac and really sorry to bother you. This update won't work now in desktop browser right ? Is that meant to like that or can we define a both desktop and Mobile supported event ?

This version should work on touch devices and desktop browsers: jsfiddle.net/Gajotres/779Kn/21

Thank you for this and during your reply I tried this event $(document).on('touchstart click', '.ui-radio', function(e) and it's working fine in both touch devices and desktop browser.

javascript - JQuery mobile customize horizontal radio buttons are not ...

javascript jquery css jquery-mobile jquery-mobile-radio