JQuery UI Buttonset

Test buttonSet jquery

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<div id="options">
    <input id="one" type="radio" name="R"  checked="checked" value="1"/><label for="one" title="one onoe">One</label>
    <input id="two" type="radio" name="R"  value="2"/><label for="two">Two</label>
</div>

<div id="options2">
    <input id="one2" type="checkbox" name="R2"  value="1"/>
      <label for="one2" title="one onoe">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512">
          <path class="calendar" d="M160 192h64v64h-64zM256 192h64v64h-64zM352 192h64v64h-64zM64 384h64v64h-64zM160 384h64v64h-64zM256 384h64v64h-64zM160 288h64v64h-64zM256 288h64v64h-64zM352 288h64v64h-64zM64 288h64v64h-64zM416 0v32h-64v-32h-224v32h-64v-32h-64v512h480v-512h-64zM448 480h-416v-352h416v352z"></path>
        </svg>
      </label>
</div>

CSS

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3/*{borderColorDefault}*/;
    background: #eee;
    font-weight: normal/*{fwDefault}*/;
    color: #aaa/*{fcDefault}*/;
    fill:#aaa;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
  background:#fff;
  color:#27aaf9;
  fill:#27aaf9;
}

.ui-button-text-only .ui-button-text {
    padding: .2em .5em;
}

JavaScript

$('#options').buttonset().change(function() { console.log("CC1",$(':checked',this).val());});

$('#options2').buttonset().change(function() { console.log("CC2",$(':checked',this).val());});