javascript - 单选按钮作为图片

Question

我需要帮助将单选按钮更改为图片。我知道还有其他论坛有这个问题，但大多数论坛都专注于将单选按钮更改为图像，该图像也看起来像单选按钮，但可能更时尚。我想做的是，当用户注册时，我想给他/她 4 张照片，他们应该选择其中一张作为他们的个人资料图片。当他们点击其中一张图片时，我希望它像这样突出显示 -

我现在有以下代码

<table>
    <tr><td style="text-align:right;">First Name:</td><td><input type="text" name="first_name" maxlength="20"></td></tr>
    <tr><td style="text-align:right;">Last Name:</td><td><input type="text" name="last_name" maxlength="20"></td></tr>
    <tr><td style="text-align:right;">Zipcode:</td><td><input type="text" name="zipcode" maxlength="5"></td></tr>
    <tr><td style="text-align:right;">Email (used for log in):</td><td><input type="text" name="email"></td></tr>
    <tr><td style="text-align:right;">Password:</td><td><input type="password" name="password"></td></tr>
    <tr><td style="text-align:right;">Re-enter Password:</td><td><input type="password" name="password_reentry"></td></tr>
    <tr><td style="text-align:right;">Admin:</td><td><input type="checkbox" name="admin" value="1"></td></tr>
    <tr><td><img src="/avinash/pictures/maleprofilepicture1.jpg" height="40" width="40"></td><td><img src="/avinash/pictures/maleprofilepicture2.jpg" height="40" width="40"></td><td><img src="/avinash/pictures/femaleprofilepicture1.jpg" height="40" width="40"></td><td><img src="/avinash/pictures/femaleprofilepicture2.jpg" height="40" width="40"></td></tr>
</table>

我想将底部的图像更改为单选按钮

任何人都可以帮我解决这个问题吗？我没有太多的编程经验，所以任何开始的代码都非常好。

任何帮助将不胜感激。

Answer 1

一小段 HTML:只是单选按钮及其关联标签(for 属性指的是单选按钮的 id):

<input type="radio" name="radiogroup" id="radio1" checked/>
<label for="radio1">This is text associated with radio1. It could be a <img src="" alt="picture"/> as well</label>

<input type="radio" name="radiogroup" id="radio2"/>
<label for="radio2">This is text associated with radio2. It could be a <img src="" alt="picture"/> as well</label>

然后是一小段 CSS，它隐藏单选按钮并将样式应用于标签。这样，您可以完全隐藏单选按钮，并使两部分内容可单击和切换，就像它们是单选按钮一样。标签可以包含文本、图片或背景图像。

input {
  display: none;  
}

input[type="radio"]:checked + label {
    display: block;
    border: 1px solid blue;
}

无需 JavaScript。

所以诀窍是:

• 使用实际的单选按钮。他们内置了这种点击切换行为。
• 使用标签并使用正确的 for 属性。这将使它们成为单选按钮的扩展。它允许您隐藏实际的单选按钮，同时它们仍然保留其行为。

http://jsfiddle.net/qUJJ3/