SO - 18954824

by gkohen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css">
<div id="dumpSec">
    <input type="radio" name="security" id="r_public" value="public" class="rSec">
        <label for="r_public"><i class="ui-icon  ui-icon-image"></i></label>
    <input type="radio" name="security" id="r_private" value="private" class="rSec">
    <label for="r_private"><i class="ui-icon ui-icon-contact"></i></label>
    <input type="radio" name="security" id="r_private2" value="private" class="rSec">
    <label for="r_private2"><i class="ui-icon ui-icon-bookmark"></i></label>

</div>

CSS

.ui-button{ 
    font-size: 11px;
}
.ui-button-text-only .ui-button-text { 
    padding: .1em .6em .2em; 
}

JavaScript

// Basic function
$("#dumpSec").buttonset();
$("#r_public").prop("checked", true);
$("#dumpSec").buttonset('refresh');

// Put in functions on the demo buttons
$("#nbr1")
    .button()
    .click(function (event) {
    $("#r_private").prop("checked", true);
    $("#dumpSec").buttonset('refresh');
});

$("#nbr2")
    .button()
    .click(function (event) {
    $("#r_link").prop("checked", true);
    $("#dumpSec").buttonset('refresh');
});

$("#nbr3")
    .button()
    .click(function (event) {
    $("#r_public").prop("checked", true);
    $("#dumpSec").buttonset('refresh');
});