JQuery - 在表单中单击聚焦答案

【问题标题】：JQuery - focus by click in formJQuery - 在表单中单击聚焦
【发布时间】：2013-04-13 23:02:23
【问题描述】：

我正在为客户编写竞赛应用程序。

说明：
我在一页上有三张图片。用户必须选择一张图片，“选择”它并点击“我想参与”。之后，他将被重定向到一个表单。（简单的部分）。

我的问题：
我怎样才能实现，如果用户点击三张图片中的一张，图片将是“选择的一张”/有焦点/被选中。
如果已选择图片，则提交按钮应正常工作。
之后，我需要“提交”/发送选择的图片（通过 id 或 class 或 data 属性）到下一页并检查它是否是正确的图片。

我该怎么做？通过“样式化”复选框还是通过 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 时，我需要设置旧边框 = none。我错过了什么？

【问题讨论】：

我们不给出“提示”（因为这基本上是用另一个名字来讨论）；如果您遇到特定问题，以及您遇到的一些代码（HTML、CSS、JavaScript 或其他），我们可以提供帮助。恐怕“建议”不是 Stack Overflow 的主题。

标签： jquery forms focus selected

【解决方案1】：

将图像设置为单选按钮，并使用:checked 伪选择器在所选图像周围添加边框。

复选框和单选按钮样式指南：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

【讨论】：

【解决方案2】：

一个简单的解决方案是：

$('#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
}

【讨论】：