jQM - Custom horizontall radio buttons

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>I like to buy and wear trendy must-haves</legend>
                <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked"  />
                <label for="radio-choice-1">1</label>
                
                <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2">2</label>
                
                <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
                <label for="radio-choice-3">3</label>
                
                <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
                <label for="radio-choice-4">4</label>
                
                <input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5"  />
                <label for="radio-choice-5">5</label>
            </fieldset>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

CSS

.checkBox{
    width: 18px;
    height: 18px;
    background: #d9d9d9;
    border-radius: 9px;  
    margin: 0 auto;
    margin-bottom: 5px;
}

.not-checked, .checked {
    background-image: url("http://www.fajrunt.org/icons-18-white.png");
    background-repeat: no-repeat;
}

.not-checked {
    background-position: -18px 0;       
    background-color:#d9d9d9;
}

.checked {
    background-position: -720px 0;    
    background-color:#6294bc;
}

JavaScript

$(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);
        }        
    });   
});