画像をクリックしてチェックボックスにチェックを入れます

デモページへopen_in_new

JSを読み込みます

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

[form.js]JavaScript

jQuery(function($){
//ユーザエージェント条件分岐
    var _ua = (function(){
    return {
    ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
    ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
    ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
    ltIE9:document.uniqueID && typeof window.matchMedia == "undefined",
    gtIE10:document.uniqueID && window.matchMedia,
    Trident:document.uniqueID,
    Gecko:'MozAppearance' in document.documentElement.style,
    Presto:window.opera,
    Blink:window.chrome,
    Webkit:typeof window.chrome == "undefined" && 'WebkitAppearance' in document.documentElement.style,
    Touch:typeof document.ontouchstart != "undefined",
    Mobile:typeof window.orientation != "undefined",
    ltAd4_4:typeof window.orientation != "undefined" && typeof(EventSource) == "undefined",
    Pointer:window.navigator.pointerEnabled,
    MSPoniter:window.navigator.msPointerEnabled
    }
    })();

if(_ua.ltIE8){
 var imgcheck = $(".imgcheck");
	imgcheck.click(function(){
	if($(this).next().prop('checked')){
		$(this).next().attr("checked", false);
	}else{
		$(this).next().attr("checked", true);}
	});
}
});

HTMl

<div class="mod_form">
<form action="" method="">
<table>
<tbody>
<tr>
<th scope="row">
好きな色は？
</th>
<td class="taste">
<label>
<img width="85" height="85" alt="スタイリッシュ" src="img/color01.jpg" class="imgcheck">
<input type="checkbox" value="1" name="taste_1">&nbsp;赤
</label>
<label>
<img width="85" height="85" alt="ナチュラル" src="img/color02.jpg" class="imgcheck">
<input type="checkbox" value="1" name="taste_2">&nbsp;オレンジ
</label>
<label>
<img width="85" height="85" alt="ジャパニーズ" src="img/color03.jpg" class="imgcheck">
<input type="checkbox" value="1" name="taste_3">&nbsp;青
</label>
<label>
<img width="85" height="85" alt="クラッシック" src="img/color04.jpg" class="imgcheck">
<input type="checkbox" value="1" name="taste_4">&nbsp;緑
</label>
<label>
<img width="85" height="85" alt="カントリー" src="img/color05.jpg" class="imgcheck">
<input type="checkbox" value="1" name="taste_5">&nbsp;紫
</label>
<label>
<img width="85" height="85" alt="和風" src="img/color06.jpg" class="imgcheck">
<input type="checkbox" value="1" name="taste_6">&nbsp;黄
</label>
</td>
</tr>
</table>
</form>
<!-- /mod_form --></div>

CSS

/* 
-----------------------------------------*/

.mod_form form {
  background-color: #FFFFFF;
  border-bottom: 1px solid #999999;
  border-top: 2px solid #999999;
}
.mod_form form label{
  cursor:pointer;
}
.mod_form form input{
  vertical-align:middle;
}
.mod_form form table {
  width: 100%;
}
.mod_form form table th,
.mod_form form table td{
  border-bottom: 1px solid #999999;
}
.mod_form form table th {
  padding: 20px;
  width:20%;
  font-weight:bold;
  color:#000;
  vertical-align: top;
}
.mod_form form table td {
  padding: 20px;
  width:80%;
  vertical-align: top;
}
.mod_form form table td.taste label {
    float: left;
    width: 108px;
}
.mod_form form table td.taste label img{
  margin:0 23px 0 0;
}