Выделить картинки для записи значений в БД

Как можно реализовать выделение картинок, кликая на них чтобы потом записать значения(id) в БД, нажав на кнопку в конце всех картинок.
Другими словами это легко можно реализовать чекбоксами, на хотелось бы просто кликать на картинки чтобы их выделять.

И ещё про снятия выделения картинки не забыть.

 

Привожу пример:
К примеру есть 4 картинки, с чекбоксами(чекбоксы можно скрыть - display:none; в css, для теста оставил)
Если нажимаешь на любую картинку то выделяются все чекбоксы под всеми картинками и самая первая картинка становиться полупрозрачной.
Как сделать чтобы выделялась конкретная картинка и конкретный чекбокс под ней.
И второй вопрос по второму клику, чтобы чекбокс отжался обратно и убрать прозрачность картинки.

html:

Код (Text):

1. <td><img class='img_links' align='left' src='http://localhost/1.jpg' width='100' height='100' alt='Test1' title='Test1' id="bg"><input name='id[1]' type='checkbox' value='1'></td>
2.  
3. <td><img class='img_links' align='left' src='http://localhost/2.jpg' width='100' height='100' alt='Test2' title='Test2' id="bg"><input name='id[2]' type='checkbox' value='2'></td>

... ещё 2 картинки

css:

Код (Text):

1. .img_links {
2.     border:2px solid #000000;
3.     margin:0px;
4.     position: relative;}
5.    
6. .img_links2 {
7.     border:2px solid #FFFFFF;
8.     margin:0px;
9.         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
10.        -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
11.        -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
12.        opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
13.        zoom: 1; /* для элемента в ИЕ, у которого не заданы width и height */
14.        position: relative;}

js:

Код (Text):

1. $(function() {
2.  $('.img_links').click(function(e){
3.      e.preventDefault();
4.    $("#bg").attr('class',"img_links2");
5.    $("input").attr('checked',"checked");
6.  });
7. });