`

image radio button 带图片的单选按钮

aspmvcc#htmljs 
阅读更多 
js img display:none 和 img src动态切换实现 动态image radio button

 代码片段 精选

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>

</style>
</head>

<body>
<script>
  function myFun(sId) {
    var oImg = document.getElementsByTagName('img');

    for (var i = 0; i < oImg.length; i++) {
      if (oImg[i].id == sId) {
        oImg[i].previousSibling.previousSibling.checked = true;
        oImg[i].src = 'pulse_letter_a_o.png';
      } else {
        oImg[i].src = 'c.png';

      }
    }
  }
</script>
<div class="niutuku">
 <input type="radio" value= "niutuku" id= "111" name="aaa" style="display:none"> <img id="aa" src="1.png" onclick="myFun(this.id)"> 
 <input type="radio" value= "niutuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="b.png" onclick="myFun(this.id)"> 
 <input type="radio" value= "niutuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="c.png" onclick="myFun(this.id)">
</div>
</body>
</html>
 

 

 

分享到：
| 手机支持视网膜技术 html css研究
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    input标签里面的name与value的区别

    type="button"，这就是一个按钮） type可选的值如下： button 按钮 checkbox 复选按钮组件 file 文件上传组件 hidden 隐藏域 image 图片区域 password 密码输入文本框 radio 单选按钮组件 reset 重置表单按钮 submit...

    使用HTML开发商业网站-表单控件-input课件.pptx

    单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮 reset 重置按钮 image 图像形式的提交按钮 hidden 隐藏域 file 文件域 name 由用户自定义 控件的名称 value 由用户自定义 input控件中的默认文本值 size ...

    js对象层次• navigator •screen•window

    • navigator • screen • window o history o location o frames[]; Frame o document  anchors[]; links[];... Button ... Radio ... Image ...　按钮对象 ...　单选域对象 　重置按钮对象 ...　图片对象

    【高端元件库】Web端高保真动态交互元件库V2.8.zip

    Basic 基础组件：Color 色彩、Typography 字体、Icon 图标、Image 图片、Avatar 头像、Button 按钮 Navigation 导航：Breadcrumb 面包屑、Dropdown 下拉菜单、NavMenu 导航菜单、Pagination 分页、Tabs 标签页、Page...

    GTK+2.0中文教程 html格式

    单选按钮 Radio Buttons 调整对象 Adjustments 创建一个调整对象 轻松使用调整对象 “调整对象”的内部机制 范围构件 Range Widgets 滚动条构件 Scrollbar Widgets 比例构件 Scale Widgets 创建一个比例...

    GTK+2.0 中文版（基于GNOME官方文档翻译)

    单选按钮 Radio Buttons 调整对象 Adjustments 创建一个调整对象 轻松使用调整对象 “调整对象”的内部机制 范围构件 Range Widgets 滚动条构件 Scrollbar Widgets 比例构件 Scale Widgets 创建一个...

    HTML5新增的8类INPUT输入类型介绍

    单选按钮 &lt;input type=”radio”&gt;复选框 &lt;input type=”checkbox”&gt;下拉列表 &lt;select&gt;密码域 &lt;input type=”password”&gt;提交按钮 &lt;input type=”submit”&gt;可单击按钮 &lt;input type=...

    jQuery完全实例.rar

    在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); --------------------------------------------------------------------...

    Java2游戏编程.pdf

    5.6.2 单选按钮(Radio Button) 5.6.3 作出重要选择 5.6.4 循环播放声音文件 5.6.5 文本域 5.6.6 标签 5.7 布局管理 5.7.1 FlowLayout类 5.7.2 GridLayout类 5.7.3 BorderLayout类 5.7.4 CardLayout类 5.8 容器...

    Eclipse_Swt_Jface_核心应用_部分19

    5.2.4 单选按钮（SWT.RADIO） 60 5.2.5 多选按钮（SWT.CHECK） 61 5.2.6 常用的方法 63 5.3 标签（Label） 64 5.3.1 文本标签 64 5.3.2 分割线标签 64 5.3.3 自定义标签（CLabel） 65 5.4 文本框...

    Ext 开发指南 学习资料

    8.7.5. SplitButton让按钮和菜单结合 8.8. 蓝与灰，切换主题 8.9. 悬停提示 8.9.1. 起初，初始化 8.9.2. 诞生，注册提示 8.9.3. 分支，标签提示 8.9.4. 发展，全局配置 8.9.5. 进化，个体配置 8.10. 灵异事件，Ext....

    css笔记课程笔记2019，5，22

    * 单选：radio - name值相同 - value值 * 复选框：checkbox - name值相同 - value值 * 下拉框 select option * 文本域 textarea * 隐藏项：type="hidden" * 文件： type="file" * 提交按钮 type=...

    LayuiForm表单.txt

    form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select ...

    从入门到精通HTML5——PDF——网盘链接

    　9.3.3　单选按钮——radio 188 　9.3.4　复选框——checkbox 189 　9.3.5　普通按钮——button 190 　9.3.6　提交按钮——submit 191 　9.3.7　重置按钮——reset 192 　9.3.8　图像域——image 193 　9.3.9　隐藏...

Magicbox
Global site tag (gtag.js) - Google Analytics