web app模拟checkbox与radio实例代码下载-幸凡学习网

web app模拟checkbox与radio实例代码下载

关注我吧

2015/9/23 17:27:19 阅读次数:7094Tags:手机模拟 radio checkbox

一、开篇

现在经常可以在网络上看到一些非常奇特的表单元素，例如Checkbox复选框和Radiobox单选框，而且更让人蛋疼的是各个浏览器的样式还不统一，今天做了一个用标签模拟checkbox与radio的实例，主要是是近做手机 web App时发现默认的样式很不好看。所以突然就做了下，先来看看预览图：

web app模拟checkbox与radio实例代码下载

二、主要思路

模拟的作用是为了给用户更好的体验效果，在代码中使用的时候隐藏真实checkbox或radio按钮。然后用相关标签做效果并且结合JS实现真实的input与效果的值是统一的。

如下源代码：

<span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>我最喜欢的书籍</span>

以上代码的用法说明（从外到内）
1、最外层的span 加上一个label的样式就是模拟label效果点击span内的都可以选中该值。
2、em是用来添加是radio还是checkbox样式的。这样JS判断比较方便，当然你也可以通过里面的input type属性判断。
3、input按钮是隐藏的，b标签是模拟外边框的，i标签是模拟中间的选中效果的。后面的文字是为了模拟label里面的文字。

三、源代码如下：

<!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=utf-8" />
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>checkbox特效</title>
<style>
body{margin:0;padding:0;}
.ex{padding:15px;}
span.label,span.label em.checkbox{display:inline-block;}
span.label em.checkbox input{display:none;}
span.label em.checkbox  b{border:1px solid #1f5641;width:20px;height:20px;line-height:20px;display:inline-block;border-radius:5px;background:#fff;vertical-align:middle;margin:-3px 10px 0 0;}
span.label em.checkbox.checked b{background-color:#1f5641;}
span.label em.checkbox.checked b i{background:url(http://www.86y.org/demo/checkbox/selected.png) no-repeat center center;background-size:15px auto;width:20px;height:20px;display:block;}

span.label em.checkbox.style2 b{border-color:#f80;}
span.label em.checkbox.style2 b i{background-color:#f80;}

span.label em.radio input{display:none;}
span.label em.radio  b{border:1px solid #1f5641;width:20px;height:20px;line-height:20px;display:inline-block;border-radius:10px;background:#fff;vertical-align:middle;margin:-3px 10px 0 0;}
span.label em.radio.checked b{border-color:#1f5641;}
span.label em.radio.checked b i{width:10px;height:10px;display:block;border-radius:5px;background:#1f5641;margin:5px auto;}

span.label em.radio.style2 b{border-color:#f80;}
span.label em.radio.style2 b i{background:#f80;}



dl dt{font-size:16px;line-height:40px;}
dl dd{margin-left:0px;line-height:30px;font-size:14px;}
</style>
</head>

<body>
<div class="ex">
	<dl>
		<dt>请选择你喜欢的书籍：（风格1）</dt>
		<dd><span class="label disable"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>三国演义</span></dd>
		<dd><span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>水浒传</span></dd>
		<dd><span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>西游记</span></dd>
		<dd><span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>红楼梦</span></dd>
	</dl>
	
	<dl>
		<dt>请选择你喜欢的书籍：（风格2）</dt>
		<dd><span class="label disable"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>三国演义</span></dd>
		<dd><span class="label"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>水浒传</span></dd>
		<dd><span class="label"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>西游记</span></dd>
		<dd><span class="label"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>红楼梦</span></dd>
	</dl>
	
	<dl>
		<dt>选择你的性别：（风格1）</dt>
		<dd><span class="label disable"><em class="radio"><input type="radio" name="radio_style1" /><b><i></i></b></em>男</span></dd>
		<dd><span class="label"><em class="radio"><input type="radio" name="radio_style1" /><b><i></i></b></em>女</span></dd>
		<dd><span class="label"><em class="radio"><input type="radio" name="radio_style1" /><b><i></i></b></em>保密</span></dd>
	</dl>
	
	<dl>
		<dt>选择你的性别：（风格2）</dt>
		<dd><span class="label disable"><em class="radio style2"><input type="radio" name="radio_style2" /><b><i></i></b></em>男</span></dd>
		<dd><span class="label"><em class="radio style2"><input type="radio" name="radio_style2" /><b><i></i></b></em>女</span></dd>
		<dd><span class="label"><em class="radio style2"><input type="radio" name="radio_style2" /><b><i></i></b></em>保密</span></dd>
	</dl>
</div>
<script src="http://www.86y.org/js/jquery.min.js" type="text/javascript"></script>
<script>
$("span.label").click(function(){
    if(!$(this).hasClass("disable"))
    {
        if($(this).find(".checkbox").length>0)
        {
            if(!$(this).find(".checkbox").eq(0).hasClass("checked"))
            {
                $(this).find(".checkbox").eq(0).addClass("checked");
                $(this).find("input").eq(0).attr("checked",true);
            }
            else
            {
                $(this).find(".checkbox").eq(0).removeClass("checked");
                $(this).find("input").eq(0).attr("checked",false);
            }
        }
        if($(this).find(".radio").length>0)
        {
            var st=$(this).find("input").eq(0).attr("name");
            $("input[name="+st+"]").parent().removeClass("checked");
            $(this).find("input").eq(0).attr("checked",true);        
            $(this).find(".radio").eq(0).addClass("checked");        
        }
    }
});
</script>
</body>
</html>

四、结语

预览地址：http://www.86y.org/demo/checkbox/
源代码地址下载：http://pan.baidu.com/s/1pKGazNX 密码: dc5z

(完)

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=754【web app模拟checkbox与radio实例代码下载】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)