`

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研究
评论
发表评论

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

相关推荐

    更换单选按钮背景图demo

    单选按钮（Radio Button）是一种图形用户界面组件，通常用于在多个互斥选项中让用户做出单一选择。在HTML和CSS中，我们可以使用`&lt;input type="radio"&gt;`标签创建单选按钮，并用CSS进行样式定制。这个"更换单选按钮...

    单选按钮ios单选框

    在iOS开发中，单选按钮（Radio Button）是一种常见的用户界面元素，用于让用户在一组互斥的选项中做出选择。这种控件在多种场景下都十分有用，例如设置选项、填写表单等。本篇文章将深入探讨如何在iOS中实现单选按钮...

    单选按钮和复选框的背景设置

    在网页设计中，单选按钮（Radio Button）和复选框（Checkbox）是常见的用户交互元素，用于收集用户的多选或单选信息。为了提升用户体验和界面美观度，常常需要对这些元素进行自定义样式设计，包括背景设置。本主题将...

    jQuery自定义单选按钮复选框样式特效

    "jQuery自定义单选按钮复选框样式特效"是一个针对初学者的简单教程，它演示了如何利用jQuery库对网页中的基本表单元素，如单选按钮（radio button）和复选框（checkbox），进行美化和功能增强。下面我们将详细探讨这...

    CSS3单选按钮和复选按钮特效.zip

    在网页设计中，单选按钮（Radio Button）和复选框（Checkbox）是常见的交互元素，用于用户在多个选项中做出选择。随着CSS3技术的发展，我们可以通过纯CSS来实现这些元素的美化，提高用户体验。"CSS3单选按钮和复选...

    iOS 单选按钮 DLRadioButton.zip

    在iOS应用开发中，用户界面的设计至关重要，而单选按钮（Radio Button）是常见的交互元素之一，用于在多个选项中让用户做出单个选择。DLRadioButton是一个专为iOS平台设计的高度可定制的单选按钮组件，它由Objective...

    CSS3自定义单选按钮美化ui特效代码.zip

    单选按钮（Radio Button）是网页表单中常见的一种交互元素，用于让用户在多个互斥选项中选择一个。在HTML中，单选按钮通过`&lt;input type="radio"&gt;`标签进行定义。然而，浏览器默认的样式通常较为单一，不符合现代网页...

    超強TreeView實現checkbox(多項選擇)和radio button(單項選擇)功能

    在PowerBuilder这一强大的开发环境中，`TreeView`控件提供了丰富的自定义功能，包括添加`checkbox`（复选框）和`radio button`（单选按钮）来增强用户交互。本篇文章将深入探讨如何在PowerBuilder中实现`TreeView`...

    好看的CSS3选项框单选按钮样式

    本话题将详细讲解如何利用CSS3来设计吸引人的选项框（checkbox）和单选按钮（radio button）样式。 首先，我们要明白原生HTML的选项框和单选按钮在默认状态下样式较为朴素，往往不能满足现代网页设计的需求。CSS3的...

    单选复选图标菜单

    这种菜单通常包含单选按钮（Radio Button）和复选框（Checkbox），它们都有对应的图标来增强视觉效果和用户体验。本文将深入探讨这两种元素的CSS实现方法、设计原则以及优化策略。 一、单选按钮与复选框的基本概念 ...

    HTML5自定义网页的checkbox radiobox单选按钮和复选框.rar

    在HTML5中，我们可以利用其强大的元素和属性来自定义网页的样式和功能，包括单选按钮（radio button）和复选框（checkbox）。在本案例中，"HTML5自定义网页的checkbox radiobox单选按钮和复选框.rar"压缩包文件提供...

    CSS3实现的多种复选框和单选按钮美化效果源码.zip

    本资源"CSS3实现的多种复选框和单选按钮美化效果源码.zip"正是利用了CSS3的特性来改进传统的HTML复选框（checkbox）和单选按钮（radio button）的显示效果，使得这些交互元素不仅具有功能性，而且更具视觉吸引力。...

    wpf radiobutton模版设计成button样式

    我们可以使用Grid或StackPanel作为容器，然后添加一个Image或TextBlock来展示按钮内容。 ```xml &lt;Button Background="{TemplateBinding Background}"&gt; &lt;/Button&gt; ``` 3. **处理状态转换**：RadioButton...

    jquery.imgradio:简单的基于图像的单选按钮、复选框和“评级系统”控件

    `jQuery.imgradio` 是一个优秀的 jQuery 插件，专门用于将传统的 HTML 复选框（checkbox）和单选按钮（radio button）替换为更加美观、用户友好的图像控件。这个插件不仅提高了用户界面的视觉吸引力，还提供了更直观...

    HTML form应用包括复选框、单选按钮的使用

    在表单中，复选框（checkbox）和单选按钮（radio button）是两种常见的输入控件，用于从用户那里收集不同类型的选项数据。 复选框（Checkbox）允许用户选择或取消选择多个选项。它通常用于当需要用户从多个选项中...

    使用纯CSS美化radio和checkbox

    在网页设计中，radio（单选按钮）和checkbox（复选框）是常见的表单元素，用于收集用户数据。然而，这些元素在默认状态下样式较为简单，可能不符合设计师们追求的美观与统一风格的需求。本篇文章将深入探讨如何使用...

    自定义单选按钮、复选框样式

    在网页设计中，为了提升用户体验和视觉效果，我们经常需要对HTML中的标准元素进行自定义，比如单选按钮（radio button）和复选框（checkbox）。本教程将介绍如何使用JavaScript（js）、CSS（css）以及可能涉及的...

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

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

    CSS3复选框和单选按钮美化特效代码

    本文将深入探讨如何使用CSS3对复选框（checkbox）和单选按钮（radio button）进行美化，以创建更具吸引力的表单元素。 首先，复选框和单选按钮是网页交互中常见的组件，用于收集用户的选择信息。它们通常以简单的...

    iPhone风格的单选框和复选框

    在iOS设备上，单选框（Radio Button）和复选框（Checkbox）通常采用独特的设计风格，以保持其用户界面的一致性和易用性。在Web开发中，开发者经常需要模仿这种iPhone风格来提高网站在移动设备上的用户体验。本文将...

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