自定义的html radio button的样式

设计要求效果如下：

平时看到的radio button效果如下：

可以看出设计上图的radio button选中和没有选中的状态都有自定义的图片样式。但是我们使用radio button基本上都是需要在互斥的一组。我们需要保持radio button本身的功能，同时又需要自定义的它的样式。之前项目中大家都是能使用传统的radio button过了就过了，也没有怎么研究。这次项目，我尝试使用了一些方法，可以达到自定义的radio button的样式。

4个选项的结构都相同，只是内容有所改变，结构如下所示：

<li>

        <span class="pollspanRadio"><input name="pollresult" id="raido1" type="radio" class="radioinput" answerid="1"></span>

        <span class="radiotext"><label class="pollspanContent" for="raido1" data-index="1">HTML(5)</label></span>

 </li>

分左右两个部分内容，左边显示radio button，右边显示text相关内容。需要对第一个span添加样式。但是目前情况会发生重叠，而且选中状态还是默认的选中状态。

通过设置样式，我们可以将默认的radio button隐藏不显示出来，通过通过JavaScript来控制用户选中其中的一个radio button，然后得到指定的值。代码如下：

<script type="text/javascript">$("#optionlist li").live('click', function () {//移除之前选中的radio的样式$("#optionlist li .pollspanRadio").removeClass("selectedoption");$(this).find(".pollspanRadio").addClass(" selectedoption");$(this).find("input[type='radio']").get(0).click();});</script>

因为现在自定义的radio button的样式，所以我们现在要获取到我们当前选中的option的内容值。通过jQuery解决问题非常方便。

我们最后想获取的值应该是作为属性放在label标签里面，这里是data-index。我们通过选中radio button，需要获得data-index的值。但是input和label是分开的，下面我们通过jQuery获得我们选中的值。

var selectedOptionText = $("#optionlist li").find(".pollspanRadio input:checked").parent().parent().find(".pollspanContent").attr("data-index");

这里主要使用了jQuery的parent()函数，在这里程序的性能不是非常好。

改进的地方：如果我们默认第二个选中的话，在checked=”checked”，但是我们是模拟显示，所以我们在程序初始化中，对此进行判断。

$(document).ready(function(){$("#optionlist li").find(".pollspanRadio input:checked").parent().addClass("selectedoption");});

完成之后的效果图如下：

提示：Radio button需要放在form表单中，多个radio button才能互斥。

Demo文件下载地址:http://files.cnblogs.com/liminjun88/customRadioButton.zip

转载于:https://www.cnblogs.com/liminjun88/archive/2012/10/22/2734149.html

自定义的html radio button的样式相关推荐

html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
[css] 如何自定义radio按钮的样式
[css] 如何自定义radio按钮的样式选择器 input[type="radio"]现在几乎不用原生的radio,一是原生样式改成设计稿的样子太浪费时间,二是不同浏览器对于原 ...
美化浏览器的radio和checkbox样式
先讲一下原理:checkboxhack技术我们使用 CSS 一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果.然后通过一些简单的扩展,我们可以不使用任何 Java ...
python做一个窗口样式_python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法...
本文借用HTML的css语法,将样式表应用到窗口部件.这里只是个简单的例子,实际上样式表的语法很丰富. 以下类似于css: StyleSheet = """ QCombo ...
微信小程序：去掉button默认样式
去除button默认样式: /* 去掉背景色和内外边距 */ button {margin: 0;padding: 0;background-color: inherit;position: stat ...
Radio Button无法对应选择的踩坑实例
有时候我们新创了一对Radio Button,在点击的时候没有响应新创的步骤:Radio Button详细用法在这种方法之下,创建的按钮,我有遇见一个问题:点击单选按钮,没有出现对应的效果. 查阅 ...
实现MFC中Radio Button组绑定同一变量控制
实现MFC中Radio Button组绑定同一变量控制总共有八个控件,如果要一个一个绑定变量,并且写响应函数,将要花费很多时间精力,所以想用的方法就是都绑上同一个变量,这样当我点击某一个控件的时候, ...
Radio Button的使用
Radio Button的使用使用方法: 1.建立一个基于对话框的用用程序,在其中加入三个Radio Button,ID分别为: IDC_RADIO1,IDC_RADIO2,IDC ...
用POST方式获取Radio Button是否被选中的信息
问题描述: 最近做一个单项选择题表单的提交,共90道题,每道题5个选项,用5个radio button来实现.因为是单选题,所以把每道题的5个radio button作为一组,使用相同的名字(该题的题 ...

自定义的html radio button的样式

自定义的html radio button的样式相关推荐

最新文章

热门文章