JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<form method="get" action="/">
<div class="UserFilter">
<ul class="UserFilter">
   <li>
      <label class="Selected" for="1">
          <input id="1" type="radio" value="1" name="Profile" />
          <img title="User 1" alt="User 1" src="http://fc01.deviantart.net/fs70/f/2013/033/7/2/720a1dd75767741968038e779f7a1e16-d5tkk8m.gif" style="width: 50px;height: 50px" />User 1</label>
   </li>
   <li>
      <label class="Selected" for="2">
          <input id="2" type="radio" value="2" name="Profile" />
          <img title="User 2" alt="User 2" src="http://fc09.deviantart.net/fs71/f/2012/221/f/f/ffac32d69fa1d6d8b0d8895d16f7ea05-d5ag1pt.gif" style="width: 50px;height: 50px" />User 2
      </label>
   </li>
</ul>
</div>
</form>

CSS

div.UserFilter {
    background: none repeat scroll 0 0 #EAE5DA;
    border-bottom: 1px solid #F1EEE6;
    border-top: 3px solid #0888A5;
    box-shadow: 0 5px 10px #F1F1F1;
}
div.UserFilter ul {
    display: inline-block;
}
ol, ul {
    list-style: none outside none;
}
div.UserFilter ul li label.Selected {
    background: none repeat scroll 0 0 #0888A5;
    border: 1px solid #16758B;
    color: #FFFFFF;
    text-shadow: 0 1px 0 #16758B;
}
div.UserFilter ul li label.Selected {
    background: none repeat scroll 0 0 #688ABD;
    border: 1px solid #688ABD;
    color: #FFFFFF;
    cursor: pointer;
    text-shadow: 0 1px 0 #52688A;
    transition: border-color 0.218s ease 0s;
}
div.UserFilter ul li label {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 2px 2px 2px 2px;
    display: inline-block;
    letter-spacing: normal;
    padding: 0 5.666px 0 0;
    transition: background 0.218s ease 0s;
    word-spacing: normal;
}

JavaScript

var labelID;
$("label img").live("click", function() {
		labelID = $(this).parent().attr('for');
		$('#'+labelID).trigger('click');		
});
	
$('ul.UserFilter input').click(function () {
        $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
        $('ul.UserFilter input:checked').parent().addClass("Selected");
        //$(this).closest("form").submit();		
});
	
$('input:checked').parent().addClass("Selected");