Question

我有一个带有两个单选按钮“男性”和“女性”的注册表单，我的注册表格工作正常，但我遇到的问题是根据用户性别选择上传个人资料图片。有关如何暗示这一点的任何建议？这是表格

中的代码

<div align ="center">Gender: </div>
        </label> <br/>
        Male &nbsp;<input type="radio" name="gender" />&nbsp;&nbsp;&nbsp;
        Female &nbsp;<input type="radio" name="gender" />

Answer 1

如果您的目标是让他们检查性别框，然后在他们选择性别后在他们的个人资料页面上显示相应的头像，那么您需要在服务器上将两个图像存储在公共目录中，例如{{ 1}}和site.com/images/male.png。加载配置文件时，您可以使用以下选项来选择相应的图片。

site.com/images/female.png

Answer 2

以下是参考fiddle，根据您的要求修改代码。

＆＃13;

var male = new Image();
male.src = "https://slm-assets1.secondlife.com/assets/7232381/lightbox/byron1mainwide.jpg?1361771089";

var female = new Image();

female.src = "http://1.bp.blogspot.com/-NgUohxAEzYQ/UDKsBYpDRmI/AAAAAAAAAcs/_anEWtBS7Ms/s1600/Female%2BVulcan%2BAvatar%2BPicture.jpg";

$("input[name='gender']").change(function() {

  if ($("input[type='radio']:checked").val() == "male") {
    $("#profile").html(male)
  } else {
    $("#profile").html(female)
  }
})

＆＃13;

#profile {
  height: 100px;
  width: 100px;
  border: 1px solid black
}
#profile img {
  height: 100px;
  width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">Gender:</div>
</label>
<br/>Male &nbsp;
<input type="radio" name="gender" value="male" />&nbsp;&nbsp;&nbsp; Female &nbsp;
<input type="radio" name="gender" value="female" />

<div id="profile"></div>

＆＃13;

更新，更改img代码：

在单选按钮上创建change事件，检查是否选中了男性或女性，并相应地更改图像src。

＆＃13;

var imageTag = document.getElementById('profile')

$("input[name='gender']").change(function() {

  if ($("input[type='radio']:checked").val() == "male") {
    imageTag.src = "https://slm-assets1.secondlife.com/assets/7232381/lightbox/byron1mainwide.jpg?1361771089"
  } else {
    imageTag.src = "http://1.bp.blogspot.com/-NgUohxAEzYQ/UDKsBYpDRmI/AAAAAAAAAcs/_anEWtBS7Ms/s1600/Female%2BVulcan%2BAvatar%2BPicture.jpg"
  }
})

＆＃13;

#profile {
  height: 100px;
  width: 100px;
  border: 1px solid black
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">Gender:</div>
</label>
<br/>Male &nbsp;
<input type="radio" name="gender" value="male" />&nbsp;&nbsp;&nbsp; Female &nbsp;
<input type="radio" name="gender" value="female" />

<img id="profile"></img>

＆＃13;

根据性别上传个人资料照片

2 个答案: