JQuery - 通過點擊表格中的焦點

Question

我正在爲客戶編寫一個比賽應用程序。

描述：
我在一頁上有三張圖片。用戶必須選擇其中一個圖片，「選擇」它並點擊「我想參與」。之後，他將被重定向到一個表格。 （簡單的部分）。

我的問題：
如何能夠做到，如果在三張圖片之一的用戶點擊，畫面將是「選擇一個」 /具有焦點選擇/。
如果選擇了圖片，提交按鈕將會正常工作。
之後，我需要「提交」/發送選定的圖片（通過id或類或數據屬性）到下一頁，並檢查它是否是正確的圖片。

我該怎麼做？通過「造型」複選框或通過jQuery？
謝謝你的提示。

編輯：
這裏是我的意思，它工作正常，我認爲的小提琴。有什麼建議麼？

HTML：

<img src="http://placekitten.com/50/50" id="first"><br/> 
<img src="http://placekitten.com/50/50" id="second"><br/> 
<img src="http://placekitten.com/50/50" id="third"><br/> 
    <input type="hidden" name="result" value="" id="hiddenresult" /> 
    <button name="submit" id="submit">Submit</button> 

JS：

$('#first, #second, #third').click(function(){  
     $('#hiddenresult').attr('value', $(this).id); 
     $(this).css('border','1px solid red'); 
    }); 

小提琴： http://jsfiddle.net/vmV75/1/

我的 「新」 問題是：
我怎樣才能給所選元素一個邊界，而不是全部。當選擇新的img時，我需要設置舊邊框=無。我錯過了什麼？

Answer 1

一個簡單的解決方案是：

$('#first, #second, #third').click(function(){  
     $('#hiddenresult').attr('value', $(this).id); 
     $('#first, #second, #third').css('border',''); 
     $(this).css('border','1px solid red'); 
    }); 

更好的解決方案是建立在其上的一類和風格：

$('#first, #second, #third').click(function(){  
      $('#hiddenresult').attr('value', $(this).id); 
      $('#first, #second, #third').removeClass('selected'); 
      $(this).addClass('selected'); 
     }); 

而且css：

img.selected{ 
    border:1px solid red 
} 

Answer 2

將圖像設置爲單選按鈕，並使用僞選擇器在選定圖像周圍添加邊框。

指南造型複選框和單選按鈕：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/