单选按钮作为图片

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：只是radiobuttons及其相关标签（for属性指的是radiobutton的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，它隐藏了radiobutton并将样式应用于标签。这样，您可以完全隐藏radiobuttons，并使两个内容可点击和切换，就像它们是radiobuttons一样。标签可以包含文本，图片或具有背景图像。

input {
  display: none;  
}

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

无需Javascript。

所以诀窍是：

• 使用实际的radiobuttons。他们内置了这种点击切换行为。
• 使用标签并使用正确的for属性。这将使它们成为radiobutton的扩展。它允许你隐藏实际的无线电按钮，同时它们仍能保持其行为。

http://jsfiddle.net/qUJJ3/

Answer 2

试试吧

http://jsfiddle.net/KwN74/9/

在本演示中，我使用的是jQuery。我试着让它成为最简单的方法。 如果您还不熟悉jQuery，可以按照此页面进行操作

http://jquery.com/download/

现在，您只需要添加此参考

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Answer 3

我不知道JS，但我会这样做（OOP）：

我会创建一个int变量picNum。 如果用户选择第一张图片，例如picNum = 1，则会出现点击事件。

通过切换语句1到4，如果是1，则轮廓图像变为第一张图片，2：第二张等。

switch (picNum)
{
    case 1:
        profilePic = pic1;
    break;
}