0

我需要帮助将单选按钮更改为图片。我知道还有其他论坛有这个问题，但他们中的大多数都专注于将单选按钮更改为看起来也像单选按钮但可能更时尚的图像。我想做的是当用户注册时我想给他/她 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>

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

谁能帮助我如何做到这一点。我没有太多的编程经验，所以任何开始的代码都会非常好。

任何帮助将不胜感激。

4

3 回答 3

4

一小段 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/

于 2013-08-04T18:23:12.533 回答
0

试试看

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

在这个演示中，我使用的是 jQuery。我尽量使它成为最简单的方法。如果你还不熟悉 jQuery，你可以关注这个页面

http://jquery.com/download/

现在，您只需要添加此引用

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
于 2013-08-04T18:19:49.160 回答
0

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

我会创建一个 int 变量，picNum. 如果用户选择第一张图片，例如picNum = 1，这将在点击事件中。

通过switch语句1到4，如果是1，则头像更改为第一张图片，2：第二张，依此类推。

switch (picNum)
{
    case 1:
        profilePic = pic1;
    break;
}
于 2013-08-04T18:27:42.990 回答