[分享]js+css美化radio和checkbox

分类：Javascript| 发布：camnprbubuol| 查看：1780 | 发表时间：2013/7/11

先看radio/checkbox效果对比:

下边贴出源码，实现的原理很简单，就是，先隐藏input[type=radio/checkbox]，然后2中状态图片的切换，同时触发值得改变。

HTML代码如下：

01<label class="label_radio">
02   <input type="radio" name="sample-radio">Radio1
03 </label>
04<label class="label_radio">
05   <input type="radio" name="sample-radio">Radio2
06 </label>
07<label class="label_radio">
08   <input type="radio" name="sample-radio"> Radio3
09 </label>
10<label class="label_check">
11   <input type="checkbox" id="myCamnpr" value="1"> checkbox1
12 </label>
13<label class="label_check">
14   <input type="checkbox" value="2"> checkbox2
15 </label>

CSS代码如下：

01label {
02  display: block;
03  cursor: pointer;
04  line-height: 20px;
05  padding-bottom: 9px;
06  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
07}
08.label_check input,
09.label_radio input {
10  margin-right: 5px;
11}
12 
13.has-js .label_check,
14.has-js .label_radio {
15  padding-left: 34px;
16}
17 
18.has-js .label_radio,
19.has-js .label_check{
20  background: url(upload/2013/7/201307111320336660.png) no-repeat;
21}
22.has-js .label_radio {
23  background-position: 0 0;
24}
25.has-js .label_check {
26  background-position: 0 -100px
27}
28.has-js label.c_on {
29  background-position: 0 -150px;
30}
31.has-js label.r_on {
32  background-position: 0 -50px;
33}
34.has-js .label_check input,
35.has-js .label_radio input {
36  position: absolute;
37  left: -9999px;
38}

JS代码如下：

01var d = document;
02var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
03  
04var gebtn = function (parEl, child) { return parEl.getElementsByTagName(child); };
05onload = function () {
06    var body = gebtn(d, 'body')[0];
07    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
08    if (!d.getElementById || !d.createTextNode) {
09        return;
10    }
11    var ls = gebtn(d, 'label');
12    for (var i = 0; i < ls.length; i++) {
13        var l = ls[i];
14        if (l.className.indexOf('label_') == -1) {
15            continue;
16        }
17        //debugger;
18        var inp = gebtn(l, 'input')[0];
19        if (l.className == 'label_check') {
20            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
21            //l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_off' : 'label_check c_on';
22            l.onclick = check_it;
23            inp.onclick = function (e) { //阻止冒泡,避免label点击事件多触发一次
24                e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true;
25            }
26        };
27        if (l.className == 'label_radio') {
28            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
29            l.onclick = turn_radio;
30        };
31    };
32};
33var check_it = function (e) {
34    var inp = gebtn(this, 'input')[0];
35    console.log(this.className);
36    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
37        this.className = 'label_check c_on';
38        if (safari) {
39            //inp.click();
40            inp.checked = false;
41            //console.log(document.getElementById('mytest').checked);
42        };
43    } else {
44        this.className = 'label_check c_off';
45        if (safari) {
46            //inp.click();
47            inp.checked = true; //也会触发事件冒泡
48            //inp.setAttribute('checked', false);//不会事件冒泡，但是设置为true时无效。
49            //console.log(inp);
50            //console.log(this);
51        };
52    };
53};
54var turn_radio = function () {
55    var inp = gebtn(this, 'input')[0];
56    if (this.className == 'label_radio r_off' || inp.checked) {
57        var ls = gebtn(this.parentNode, 'label');
58        for (var i = 0; i < ls.length; i++) {
59            var l = ls[i];
60            if (l.className.indexOf('label_radio') == -1) {
61                continue;
62            };
63            l.className = 'label_radio r_off';
64        };
65        this.className = 'label_radio r_on';
66        if (safari) {
67            inp.click();
68        };
69    } else {
70        this.className = 'label_radio r_off';
71        if (safari) {
72            inp.click();
73        };
74    };
75}; 

备份图片：

下边2张图片，可以合成一张，效果也很好看的。哈哈

365据说看到好文章不转的人，服务器容易宕机！

标签：Html CSS JS Widget

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/fancy-checkboxes-and-radio-buttons.html

一条新消息

士兵：报告淫长，前面发现女兵。。。。淫长：弟兄们，把枪擦亮点，上好子弹，准备进攻。士兵：报告淫长，女兵已经“逼”上来了! 淫长：弟兄们，出“击”巴!! 淫长：先让“炮”兵进行掩护，打完一个鸡数，弟兄们“上”！淫长：攻占2点高低计划：炮打半小时，枪射半小时，手刃半小时。士兵：报告淫长女兵逼的太紧我射了．淫长：速度报来战况。士兵：报告淫长我方已经子弹耗尽，但女兵还是步步紧逼。。怎么办。。．淫长：兄弟们，子弹没有就和她们肉博。一定要把女兵全奸为止。。士兵：报告淫长经过一小时的肉博战。战斗结束，女兵大部分被奸，小部分受精而逃，其余被抚乳！我军有一人受伤，名叫杨伟，就是看贴没贊的！…… [?]

[分享]js+css美化radio和checkbox

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

[分享]js+css美化radio和checkbox

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱