自定义的html radio button的样式

设计要求效果如下:

<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->

平时看到的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>
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

  分左右两个部分内容,左边显示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>
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

因为现在自定义的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");
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

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

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

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

完成之后的效果图如下:

<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

Firefox显示中文字太小的问题 (改变Firefox最小字体)

19540
来自专栏GIS讲堂

Openlayers3中SVG图加载

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

23540
来自专栏菜鸟计划

vue组件详解(三)——组件通信

组件之间通信可以用下图表示: ? 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 一、自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。...

50740
来自专栏郭耀华‘s Blog

NetBeans的(默认)快捷键

NetBeans的(默认)快捷键 1、完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段;  2、错误提示:alt + enter /...

30060
来自专栏吾爱乐享

php学习之html属性-框架(八)

20930
来自专栏前端之路

–vue2.0父子组件及非父子组件间实现通信

12920
来自专栏韩东吉的Unity杂货铺

零基础入门 15: UGUI Button

按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下UGUI里的按钮,Button组件。

16210
来自专栏IMWeb前端团队

React直出实现与原理

前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出。 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什...

39780
来自专栏黑泽君的专栏

NetBeans的(默认)快捷键

15420
来自专栏从零开始学自动化测试

Selenium2+python自动化35-获取元素属性

前言 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比。本篇介绍几种常见的获取元素属性方法。 一、获取页面title 1.有很多小伙伴都不知道t...

34450

扫码关注云+社区

领取腾讯云代金券