[form:inputタグ]画像の上にcheckboxを重ねて表示する

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

//searchimg
jQuery(function($){
  //allcheck allclear
  $(function () {
      $("#allcheck").click(function(){
          $(".mod_search_form input:checkbox").prop({'checked':true});
          $(".mod_search_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
          $(".mod_search_form_btn").addClass("validity");
      });
      $("#allclear").click(function(){
          $(".mod_search_form input:checkbox").prop({'checked':false});
          $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
          $(".mod_search_form_btn").removeClass("validity");
      });
  });
  //btn
  $(function(){
             //送信ボタンの無効、チェックボックスを外す
              $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
              $(".mod_search_form input:checkbox").attr('checked',false);
             //チェックボックスがクリックされると送信ボタン有効
              $(".mod_search_form label,.mod_search_form input").click(function(){
                  if($(".mod_search_form input:checkbox").is(':checked')){
                      $(".mod_search_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
                      $(".mod_search_form_btn").addClass("validity");
                  }else{
                       $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
                       $(".mod_search_form_btn").removeClass("validity");
              }
          })
  });

  });

HTMl

<div class="mod_search">
<ul class="searchbtnlist">
  <li><button id="allcheck">全て選択する</button></li>
  <li><button id="allclear">全ての選択を外す</button></li>
</ul>

<div class="mod_search_form">
<form action="">
<ul>
  <li><label for="check_01"><img src="img/check_a.jpg" alt=""><input id="check_01" type="checkbox" value="check_01"><span></span></label></li>
  <li><label for="check_02"><img src="img/check_b.jpg" alt=""><input id="check_02" type="checkbox" value="check_02"><span></span></label></li>
  <li><label for="check_03"><img src="img/check_c.jpg" alt=""><input id="check_03" type="checkbox" value="check_03"><span></span></label></li>
  <li><label for="check_04"><img src="img/check_d.jpg" alt=""><input id="check_04" type="checkbox" value="check_04"><span></span></label></li>
  <li><label for="check_05"><img src="img/check_e.jpg" alt=""><input id="check_05" type="checkbox" value="check_05"><span></span></label></li>
  <li><label for="check_06"><img src="img/check_f.jpg" alt=""><input id="check_06" type="checkbox" value="check_06"><span></span></label></li>
  <li><label for="check_07"><img src="img/check_g.jpg" alt=""><input id="check_07" type="checkbox" value="check_07"><span></span></label></li>
  <li><label for="check_08"><img src="img/check_h.jpg" alt=""><input id="check_08" type="checkbox" value="check_08"><span></span></label></li>
</ul>
<div class="mod_search_form_btn">
<input class="searchbtn" type="submit" value="検索する">
<!-- /.mod_search_form_btn --></div>
</form>
<!-- /.mod_search_form --></div>
<!-- /.mod_search --></div>

CSS

/* mod_search
-----------------------------------------*/
.mod_search{
  margin: 40px 0 0 0;
  width:740px;
}

.mod_search ul.searchbtnlist{
 margin:20px 0 30px 0;
}
.mod_search ul.searchbtnlist li{
  display: inline-block;
  margin: 0 2px 0 2px;
}
.mod_search ul.searchbtnlist li button{
  background:none;
  border:none;
  cursor: pointer;
  min-width: 150px;
  box-sizing:border-box;
  padding: 7px 10px 6px 10px;
  line-height: 1;
  border: solid 1px #CCC;
    /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.mod_search ul.searchbtnlist li button:hover,
.mod_search ul.searchbtnlist li button:focus{
  text-decoration: none!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+100 */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* mod_search_form */
.mod_search_form{
}
.mod_search_form form ul{
  width: 750px;
  margin: 0 -10px 0 0;
  position: relative;
  overflow: hidden;
}
.mod_search_form form ul li{
  position: relative;
  float: left;
  margin: 0 10px 10px 0;
}
.mod_search_form form ul li label img{
  cursor: pointer;
}

/*CheckBox */
.mod_search_form form ul li label input{
  position: absolute;
  top:5px;
  left:3px;
  opacity: 0;
}
.mod_search_form form ul label input + span {
  position: absolute;
  top:5px;
  left:3px;
  display: block;
  width: 24px;
  height: 19px;
}
.mod_search_form form ul label input[type="checkbox"] + span {
}
.mod_search_form form ul label input[type="checkbox"]:checked + span {
  background:transparent url('../img/bg_check.png') no-repeat 5px 0px;
}
/* mod_search_form_btn */
.mod_search_form_btn{
  clear: both;
  text-align: center;
  margin:40px 0 0 0;
}
.mod_search_form_btn input.searchbtn{
  background:none;
  border:none;
  font-size: 115%;
  cursor: pointer;
  min-width: 210px;
  color: #262626!important;
  box-sizing:border-box;
  padding: 19px 17px 18px 0;
  line-height: 1;
  border: solid 1px #e6e6e6;
  /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  background:transparent url('../img/icon_search.png') no-repeat 140px 20px;
}
.mod_search_form_btn.validity input.searchbtn{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
background: #ffffff; /* Old browsers */
background: url('../img/icon_search.png'),-moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6-15 */
background: url('../img/icon_search.png'),-webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
background: url('../img/icon_search.png'),linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  background-repeat:no-repeat;
  background-position:140px 20px,0 0;
}
.mod_search_form_btn.validity input.searchbtn:hover{
  text-decoration: none!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+100 */
background: #ededed; /* Old browsers */
background: url('../img/icon_search.png'),-moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 100%); /* FF3.6-15 */
background: url('../img/icon_search.png'),-webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: url('../img/icon_search.png'),linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  background-repeat:no-repeat;
  background-position:140px 20px,0 0;
}