Images as Radio Buttons, with Triggered Submit Button

by Matthew Schenker

HTML

<form>
  <label>
    <input type="radio" name="radio" value="small" checked>
    <img src="http://placehold.it/40x60/0bf/fff&text=A">
  </label>
  <label>
    <input type="radio" name="radio" value="medium">
    <img src="http://placehold.it/40x60/b0f/fff&text=B">
  </label>
  <label>
    <input type="radio" name="radio" value="big">
    <img src="http://placehold.it/40x60/b0f/fff&text=B">
  </label>
  <label>
    <input type="radio" name="radio" value="x-large">
    <img src="http://placehold.it/40x60/b0f/fff&text=B">
  </label>
  <div id="submitid" class="submitclass">
    <input type="submit" value="Confirm" />
  </div>
</form>

CSS

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

.submitclass {
  display: none;
}

JavaScript

$(document).ready(function() {
  $("input[name$='radio']").click(function() {
    $("div.submitclass").hide();
    $("#submitid").show();
  });
});