自定义的html radio button的样式-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

自定义的html radio button的样式

简介:

设计要求效果如下:

image

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

clip_image002

可以看出设计上图的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添加样式。但是目前情况会发生重叠,而且选中状态还是默认的选中状态。

image

通过设置样式,我们可以将默认的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");
        });

完成之后的效果图如下:

image

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章