作业 利用单选框控制图片的显示

最新推荐文章于 2025-12-09 09:54:41 发布
原创 最新推荐文章于 2025-12-09 09:54:41 发布 · 271 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过HTML和JavaScript实现一个简单的界面，利用两个单选框控制显示男士或女士图片，通过checked属性判断并实时切换图片素材。

需求说明

界面有两个单选框
分别显示男和女
点第一个单选框，显示一个男士图
点第二个单选框，显示一个女子图

图片素材

在这里插入图片描述

https://img-blog.csdnimg.cn/20210428162403378.png

在这里插入图片描述

https://img-blog.csdnimg.cn/20210428162420772.png

提示

提前布置好图片标签
把属性先准备好
让属性为空
通过判断单选框是否选中来明确显示男图还是女图

单远框元素具有checked属性
选中就是true
否则就是false

基于Spring Boot框架的课程作业管理系统设计与实现（开题报告）
毕业作品网站
03-29 563
比较有代表性的是美国北卡罗来纳州州立大学物理系开发的WebAssign，是一个集天文学、生物学、化学、工学、地球科学、数学、理学、物理学和统计学学科科目的作业管理系统，系统主要分为学生端和教师端两大部分，题目类型包括填空题、单选题、多选题、文本题和文件上传题。对于课程作业管理方面，虽然现在已经有利用信息技术运作课程作业管理的例子，但大都处于起步阶段，有的仅仅是一些静态的网页设计或单纯的搬一些必需的表格上电脑，缺乏互动性，学生只能查看，无法提交作业，也无法实现师生之间的交流。当今时代是飞速发展的信息时代。
作业2
02-09
`<input>`元素有多种类型，如文本（type="text"）、密码（type="password"）、复选框（type="checkbox"）和单选按钮（type="radio"）。`<form>`标签用于包裹表单，`action`属性定义提交表单时发送请求的URL，`method...
JQ单选框，选择后按钮出现图片
xuemoKingDeath的博客
07-26 2168
html> html> head> meta charset="UTF-8"> title>title> script src="../../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8">script> script type="text/javascript
如何使用单选按钮控制echarts图形类型切换
Yic__的博客
03-16 1272
文章转自他处 非原创 1 图形组件 <template> <el-row :gutter="20"> <el-col :span="12"> <el-radio-group v-model="chartType" @change="changeChartType"> <el-radio label="column">柱形图</el-radio> <el-radio l.
【期末复习03】单选+判断作业
2301_76770672的博客
12-09 221
是面向对象编程中继承体系下的核心特性：当子类继承父类后，子类可以定义一个与父类中方法名、参数列表、返回值类型（兼容）完全一致的方法，以此覆盖父类原有的方法实现，使得子类对象调用该方法时，执行的是子类重写后的逻辑。接口是 Java 中一种特殊的引用类型,它只定义 “应该做什么”，但不定义 “具体怎么做”,实现接口的类必须遵守该契约,接口不能被实例化。
html显示当前小时分钟秒秋,北语18秋《网页制作》作业1234
weixin_42362068的博客
06-24 806
18秋《网页制作》作业1% P( K4 k' A# Z6 K1 E$ F2 ?1.[单选题]关于在FireworksMX2004中制作动画，下面叙述正确的是() (满分4 n5 W4 `& t+ {0 y7 Z A. 网页中的动画只可以包含一帧- Gv1 ?) V. W6 i# j* c9 {: ^2 h4 X' WB. FireworksMX2004不可以制作...
一、作业主题 设计并制作一个以 “校园生活” 为主题的响应式网页，综合运用本学期所学的 HTML、CSS、JavaScript 知识，展示校园的学习、活动、美食等特色内容。 二、作业要求 1. HTML 部分 使用 HTML5 语义化标签（如 header、nav、main、article、section、footer 等）搭建网页结构，合理规划页面布局。 至少创建 3 个不同内容的页面，通过超链接实现页面之间的跳转。 在页面中使用表格展示校园活动时间表或课程表，表格需包含表头、表体，合理设置行和列，并添加必要的注释。 设计一个用户反馈表单，包含文本框、单选框、复选框、下拉列表、文本域等表单元素，用于收集用户对校园生活的意见和建议。 2. CSS 部分 使用外部样式表文件进行样式设计，统一整个网站的风格。 运用 CSS 盒模型对页面元素进行布局，实现多栏布局，例如首页可以分为左侧导航栏、中间主要内容区、右侧侧边栏。 为网页添加合理的背景颜色、字体样式、文本颜色、边框等样式，提升页面美观度。 3. JavaScript 部分 在网页中使用 JavaScript 实现一个轮播图功能，用于展示校园风景图片，轮播图需具备自动播放和手动切换的功能。 利用 JavaScript 对象创建一个简单的校园活动计数器，记录用户点击查看活动详情的次数，并在页面上实时显示。 通过 BOM 和 DOM 编程实现页面元素的动态操作，例如点击按钮显示或隐藏某段文本内容，或者改变页面元素的样式。
06-18
可以通过设置 `margin`、`padding`、`border` 和 `content` 来控制元素的布局。为了实现响应式设计，可以结合媒体查询和灵活的单位（如百分比或 `em`）。 以下是一个简单的响应式布局示例： ```css /* 基础样式 */...
精选资源
大学生动物介绍网页设计作品 dreamweaver作业静态HTML网页设计模板 保护动物网页作业制作
08-10
- **元素**: 包括文本框 (`<input type="text">`)、单选按钮 (`<input type="radio">`)、复选框 (`<input type="checkbox">`) 等。 - **验证**: 可以使用 JavaScript 进行客户端验证，确保数据的有效性。 ### 三、...
大学生个人主页网页作业展示
- 表单控件：如文本框(`<input type="text">`), 单选按钮(`<input type="radio">`), 复选框(`<input type="checkbox">`), 提交按钮(`<button type="submit">`)等，用于用户输入和交互。 ### 知识点二：CSS应用 CSS...
html 单选框设置图片,css样式~~用图片模拟单选框radio的功能
weixin_42519488的博客
06-03 642
**使用css样式模拟单选框radio的功能**### **HTML代码：**~~~联系人先生女士手机号收货地址~~~### **css代码：**~~~body {background: #f0eff5;}.address {width: 100%;margin-top: 10px;background: #fff;}.address li {width: 90%;height: 48px;mar...
elementUI 自定义下拉选择框展示单选框、银行图片及文字等选项
weixin_41884808的博客
03-11 6654
最近遇到一个需求，如下图，如果用下拉框实现的话，没有插槽可用，就换了个方案，用饿了么组件库中的下拉菜单组合一个输入框来实现。 <template> <div class="component-wrap"> <el-form ref="form" :model="form" label-width="80px"> <section style="display: flex; align-items: center; margin-bottom
单选按钮组选中的按钮默认样式替换成图片
anmi7832的博客
04-12 1017
要实现下面单选按钮组的选中状态用图片显示： html结构： 　　　　　　　　　　　　　　<div class="select-radio-box"> <div class="select-box"> <input val...
嵌入式外设管理框架EPMF是一个专为机器人及工业控制领域设计的高可靠事件驱动可配置的嵌入式设备外设统一管理中间件它通过分层控制架构实现了应用层管理层与驱动层的清晰解耦.zip
12-30
嵌入式外设管理框架EPMF是一个专为机器人及工业控制领域设计的高可靠事件驱动可配置的嵌入式设备外设统一管理中间件它通过分层控制架构实现了应用层管理层与驱动层的清晰解耦.zip
运维-指针-24-动态内存和静态内存的比较.swf
12-30
运维-指针_24_动态内存和静态内存的比较.swf
多源动态最优潮流的分布鲁棒优化方法（IEEE118节点）（Matlab代码实现）
最新发布
12-30
多源动态最优潮流的分布鲁棒优化方法（IEEE118节点）（Matlab代码实现）内容概要：本文介绍了基于Matlab代码实现的多源动态最优潮流的分布鲁棒优化方法，适用于IEEE118节点电力系统。该方法结合两阶段鲁棒模型与确定性模型，旨在应对电力系统中多源输入（如可再生能源）的不确定性，提升系统运行的安全性与经济性。文中详细阐述了分布鲁棒优化的建模思路，包括不确定性集合的构建、目标函数的设计以及约束条件的处理，并通过Matlab编程实现算法求解，提供了完整的仿真流程与结果分析。此外，文档还列举了大量相关电力系统优化研究案例，涵盖微电网调度、电动汽车集群并网、需求响应、储能配置等多个方向，展示了其在实际工程中的广泛应用价值。; 适合人群：具备一定电力系统基础知识和Matlab编程能力的研究生、科研人员及从事能源系统优化工作的工程师。; 使用场景及目标：①用于研究高比例可再生能源接入背景下电力系统的动态最优潮流问题；②支撑科研工作中对分布鲁棒优化模型的复现与改进；③为电力系统调度、规划及运行决策提供理论支持与仿真工具。; 阅读建议：建议读者结合提供的Matlab代码与IEEE118节点系统参数进行实操演练，深入理解分布鲁棒优化的建模逻辑与求解过程，同时可参考文中提及的其他优化案例拓展研究思路。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值