Choice one Choice two Choice three Choice four

Send it!

• Here is the first selection

  Select Cancel

• Here is the second selection

  Select Cancel

• Here is the third selection

  Select Cancel

• Here is the fourth selection

  Select Cancel

Send it!

.checklist { list-style: none; margin: 0; padding: 0; } .checklist li { float: left; margin-right: 10px; background: url(i/checkboxbg.gif) no-repeat 0 0; width: 105px; height: 150px; position: relative; font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif; } .checklist li.selected { background-position: -105px 0; } .checklist li.selected .checkbox-select { display: none; } .checkbox-select { display: block; float: left; position: absolute; top: 118px; left: 10px; width: 85px; height: 23px; background: url(i/select.gif) no-repeat 0 0; text-indent: -9999px; } .checklist li input { display: none; } a.checkbox-deselect { display: none; color: white; font-weight: bold; text-decoration: none; position: absolute; top: 120px; right: 10px; } .checklist li.selected a.checkbox-deselect { display: block; } .checklist li p { text-align: center; padding: 8px; } .sendit { display: block; float: left; top: 118px; left: 10px; width: 115px; height: 34px; border: 0; cursor: pointer; background: url(i/sendit.gif) no-repeat 0 0; text-indent: -9999px; margin: 20px 0; }

$(Document).ready(function() { $(".checklist .checkbox-select").click( function(event) { event.preventDefault(); $(this).parent().addClass("selected"); $(this).parent().find(":checkbox").attr("checked","checked"); } ); $(".checklist .checkbox-deselect").click( function(event) { event.preventDefault(); $(this).parent().removeClass("selected"); $(this).parent().find(":checkbox").removeAttr("checked"); } ); });