HTML：

/*单选*/
<div>
    <label for="radio1" class="jqTransformRadio" rel=""></label>
    <input type="radio" id="radio1" style="display: none;" value="选项一">
    <label for="radio1" class="option-radio">选项一</label>
</div>

/*多选*/
<div>
    <label for="checkbox1" class="jqTransformCheckbox"></label>
    <input type="checkbox" id="checkbox1" value="选项一" style="display: none;">
    <label for="checkbox1" class="option-checkbox">选项一</label>
</div>

JQ：

/*单选*/
$(".jqTransformRadio").click(function () {
   $(".jqTransformRadio").removeClass("jqTransformChecked");
   $(this).addClass("jqTransformChecked");
});
$(".option-radio").click(function () {
   $(".jqTransformRadio").removeClass("jqTransformChecked");
   $(this).prev().prev().addClass("jqTransformChecked");
});

/*多选*/
$(".jqTransformCheckbox").click(function () {
   $(this).toggleClass("jqTransformChecked");
});
$(".option-checkbox").click(function () {
   $(this).prev().prev().toggleClass("jqTransformChecked");
});

CSS：

.jqTransformRadioWrapper, .jqTransformCheckboxWrapper{
  top: 7px;
  _zoom: 1;
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
}
.jqTransformRadio {
  background: transparent url(../images/radio.png) no-repeat center top;
  vertical-align: middle;
  height: 16px;
  width: 18px;
  display: block;
  float: left;
  cursor: pointer;
  margin-left: 8px;
  margin-top: 2px;
}
.jqTransformCheckbox {
  background: transparent url(../images/checkbox.png) no-repeat center top;
  vertical-align: middle;
  height: 16px;
  width: 18px;
  position: relative;
  display: block;
  float: left;
  cursor: pointer;
  margin-left: 8px;
  margin-top: 2px;
}
.jqTransformChecked {
  background-position: center bottom;
}
.option-radio, .option-checkbox{
  color: #5a5a5a;
  font-weight: normal;
  padding-left: 0.3rem;
  cursor: pointer;
}

单选与多选img：

单选：

radio.png

多选：

checkbox.png