从单选按钮中获取值以选择 html 格式的图像

Take value from radio button to choose an image in html

本文关键字：html 格式 图像 选择 单选按钮 获取      更新时间：2023-09-26

我有一个聊天应用程序。 这是在聊天页面中显示对话的代码：

<div id="conversation">
  <div id="messages" class="scrollbar col-md-6">
    <ul ng-repeat="(k,v) in messageshistory " class="chat" data-ng-show="k == tmpuserid">
      <li ng-repeat="(a,b) in v ">
        <span ng-class="(b.from == tmpuserid) ? 'chat-img pull-right':'chat-img pull-left'">
          <img src="./img/avatar.png" alt="User Avatar" class="img-circle">
        </span>
          <div class="col-md-10 chat-body clearfix" >
            <div class="header">
              <small data-ng-if="b.from == tmpuserid" class="text-muted">
                <span  class="glyphicon glyphicon-time"></span> {{ b.time }}
              </small>
                <strong ng-class="(b.from == tmpuserid) ? 'pull-right primary-font':'primary-font'" >{{b.fromname}}</strong>
              <small data-ng-if="b.from != tmpuserid" class="pull-right text-muted">
                <span  class="glyphicon glyphicon-time"></span>{{ b.time }}
              </small>
            </div>
                <p>{{ b.message }}</p>
         </div>
       </li>
     </ul>
   </div>
 </div>

因此，在此应用程序中，注册页面没有为其头像上传照片。 所以我用 <img src="./img/avatar.png" alt="User Avatar" class="img-circle">

但我想在带有单选按钮的注册页面中添加"性别"，例如：

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female
</form>

当用户在注册中勾选"男性"时，他将使用 <img src="./img/maleavatar.png" alt="Male Avatar" class="img-circle">

当用户选中"女性"时，她将使用 <img src="./img/femaleavatar.png" alt="Female Avatar" class="img-circle">

我的意思是，这个应用程序将有两个头像图像，如果男性使用男性，如果女性使用女性，我该怎么写？

您可以将

两个图像添加到HTML中，然后使用正确的图像，并ng-switch用户性别（ng-switch和单选按钮绑定有足够的来源供您找到解决方案）。

希望这能让你走上正轨，如果不是直接问。

相关文章：