我有一个表单设置，您可以使用图像选择项目 - 当选择图像时，它会以边框突出显示 - 但是，我想添加另一部分代码，让您单击相同的图像以取消选择它（而不是只是点击另一个图像） - 但我不知道如何自己做！到目前为止我的代码写在下面，还有一个jfiddle链接来显示它的作用。
<div id="container">
<div id="sidebar">
<h2>Instructions</h2>
<br />To build your sword, select a blade, tsuba, saya, tsuka, as well as any accessories you may want to go along with your order - the sword itself will be shown below all the available options as you select them (please note that the blades will not be shown - a simple default blade will appear, but your blade option is still considered within your order) and if needed, you can also enter comments and/or feedback in the appropriate textbox at the bottom of the page! Hovering over the image of any item will bring up the price of the item, and clicking on the item will select it.</div>
<form name="customSword" method="post" id="swordForm">
<div id="shop">
<table class="custom" id="k-and-f" name="">
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/horseset_zps185b881c.jpg" data-value="kashira-1" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/dragonNo1_zps6215ac12.jpg" data-value="kashira-2" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/matis_zps9c427b6d.jpg" data-value="kashira-3" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/onimasks_zpsa279a84f.jpg" data-value="kashira-4" style="margin-right: 35px;" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castflowers_zps14608b8c.jpg" data-value="kashira-5" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/flowers_zps873c43a4.jpg" data-value="kashira-6" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/japcoi2_zpsd6cd6823.jpg" data-value="kashira-7" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/CZropeandpalm_zps5c9ca959.jpg" data-value="kashira-8" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/IMG_2764_zps4f10741f.jpg" data-value="kashira-9" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/brasewaves_zps20dcc84b.jpg" data-value="kashira-10" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castcoifish_zpsce3a07ce.jpg" data-value="kashira-11" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castbird_zpsc6ab6baa.jpg" data-value="kashira-12" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/ninja_zpscf137d51.jpg" data-value="kashira-13" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castwavessilv_zpsb3361e56.jpg?t=1374882863" data-value="kashira-14" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/octopie_zpsa0ecc0da.jpg?t=1374883535" data-value="kashira-15" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/clouddragonbro_zpsb7396560.jpg?t=1374883487" data-value="kashira-16" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/clouddragonsilv_zpscd55983b.jpg?t=1374883813" data-value="kashira-17" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/clouddragonset_zpsa66f670f.jpg?t=1374883849" data-value="kashira-18" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/dragonscaleset_zpsbe9aa47f2_zps6504302f.jpg" data-value="kashira-19" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/dragonset_zps1c640d0b.jpg?t=1374884395" data-value="kashira-20" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/snakeset_zps7f6aff25.jpg?t=1374884467" data-value="kashira-21" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/frogset_zps90b32fdb.jpg?t=1374884812" data-value="kashira-22" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/toadset_zps42662e7d.jpg" data-value="kashira-23" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/toadset_zps42662e7d.jpg" data-value="kashira-24" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/geishaset_zpsff27037d.jpg" data-value="kashira-25" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/shrimpset_zps4dcb497a.jpg" data-value="kashira-26" />
</td>
</tr>
<input type="hidden" id="image_value" name="selected-image" value="">
</table>
</div>
</form>
</div>
jQuery的：
$(document).ready(function () {
$('#swordForm img').click(function () {
// Set the form value
$('#image-value').val($(this).attr('data-value'));
// Unhighlight all the images
$('#swordForm img').removeClass('highlighted');
// Highlight the newly selected image
$(this).addClass('highlighted');
});
});
答案 0 :(得分：0)
$(document).ready(function () {
$('#swordForm img').click(function () {
if $(this).hasClass('highlighted') $('input:hidden').val('');
else {
$('input:hidden').val($(this).attr('data-value'));
// Unhighlight all the images
$('#swordForm img').removeClass('highlighted');
}
$(this).toggleClass('highlighted');
});
});
编辑：我对数据值的看法是错误的，感谢Sheikh抓住了这个数据。
答案 1 :(得分：0)
你可以试试这个（$('#image-value').val($(this).attr('data-value'));不起作用）
$('#swordForm img').click(function () {
if($(this).hasClass('highlighted')){
$(this).removeClass('highlighted');
$('input:hidden').val('');
return;
}
$('input:hidden').val($(this).attr('data-value'));
$('#swordForm img').removeClass('highlighted');
$(this).addClass('highlighted');
});