码迷,mamicode.com
首页 > Web开发 > 详细

纯js模拟 radio和checkbox控件

时间:2014-05-18 19:44:42      阅读:467      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   class   code   c   

代码待优化,功能实现了,不兼容ie8以上, 相同name的radio可以实现切换的操作, 分享代码,共同学习进步

 

bubuko.com,布布扣
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <style>
            .radiobox,
            .checkbox {
                width: 10px;
                height: 10px;
                padding: 2px;
                border: solid #ccc 1px;
            }
            
            .radiobox .rb_action,
            .checkbox .cb_action {
                width: 8px;
                height: 8px;
                border: solid #ccc 1px;
            }
            
            .radiobox .rb_action:hover,
            .checkbox .cb_action:hover {
                background: #95d692;
            }
            
            .radiobox {
                border-radius: 10px;
            }
            .radiobox .rb_action {
                border-radius: 8px;
            }
            
        </style>
    </head>
    
    <body>
        
        <input type="checkbox"/>
        <input type="checkbox"/>

        <input type="radio" name=‘demo‘/>
        <input type="radio" name=‘demo‘/>
        <input type="radio" />
        
        <script src="script/jquery.min.js"></script>
        
        <script>
            
            var target = document.getElementsByTagName(input);
                len = target.length, i = 0, id = 0;
            
            for( ; i < len; i++) {
                var elem = target[i],
                    type = elem.getAttribute(type);
                
                switch(type) {
                    case checkbox: checkRadioBoxFunc.call(elem); break;
                    case radio : checkRadioBoxFunc.call(elem, radio); break;
                }
            }
            
            function checkRadioBoxFunc(radio) {
                // 绑定id
                this.setAttribute(id, id);
                
                // 建立原始控件信息库
                var CheckRadioBoxInfo = {
                    
                    //原始控件四边缘坐标
                    //‘coord4side‘: {‘top‘: ‘‘, ‘right‘: ‘‘, ‘bottom‘: ‘‘, ‘left‘: ‘‘}
                    
                    // 原始控件偏移坐标
                    offset: {
                        top: this.offsetTop + px,
                        left: this.offsetLeft + px
                    }
                };
                
                // 隐藏原始控件
                this.style.visibility = hidden;
                
                // 创建新控件结构
                
                var newNode = document.createElement(div),
                    
                    pClassName = !radio ? checkbox : radiobox,
                    
                    tClassName = !radio ? cb_action : rb_action,
                    
                    radionName = !radio ? ‘‘ : this.getAttribute(name);
            
                newNode.style.cssText = position:absolute;top: + CheckRadioBoxInfo.offset.top + ;left: + CheckRadioBoxInfo.offset.left + ;;
                
                newNode.innerHTML = <div class=" + pClassName + " data-id=" + id + " > + <div class=" + tClassName + " data-action=" + tClassName + " name=" + radionName + " ></div> + </div>;
                
                document.body.insertBefore(newNode, this);
                
                id++;
                
                // checkradiobox事件监听
                
                var flag = 0;
                
                newNode.addEventListener(click, function() {
                    // 父级节点
                    var parent = this.childNodes[0],
                        // 行为节点
                        tar = parent.childNodes[0];
                        
                        
                    // 父节点的id号
                    var pid = parent.getAttribute(data-id),
                        // 节点的行为类型
                        action = tar.getAttribute(data-action),
                        // 获取和pid相同的原始控件对象
                        checkRadiobox = document.getElementById(pid);
                    
                    // 如果是checkbox
                    if(action == cb_action) {
                        if(!flag) {
                            
                            // 当前模拟checkbox 对象选中
                            tar.style.cssText = background:#f00;
                            // 当前原始checkbox 对象选中
                            checkRadiobox.setAttribute(checked,checked);

                            flag = 1;
                        }
                        else { // 移除模拟和原始checkbox 对象的选中
                            tar.style.cssText = ‘‘;

                            checkRadiobox.removeAttribute(checked);

                            flag = 0;
                        }
                    }
                    else { // 如果是radio
                        
                        // 当前模拟控件的name属性
                        var radioName = tar.getAttribute(name),
                            // 获取所有与模拟控件相同name的原始控件
                            radioes = radioName ? document.getElementsByName(radioName) : ‘‘,
                            
                            len = radioes.length, i = 0;
                        
                        if(len) { // radio组的操作
                            for( ; i < len; i++) { // 移除所有radio的选中状态
                                radioes[i].style.background = none;
                                
                                radioes[i].removeAttribute(checked);
                            }
                            // 当前模拟控件选中
                            tar.style.cssText = background:#f00;
                            
                            // 当前原始控件选中
                            checkRadiobox.setAttribute(checked,checked);
                        }
                        else { // 单一radio的选中
                            
                            tar.style.cssText = background:#f00;
                            
                            checkRadiobox.setAttribute(checked,checked);
                        }
                    }
                });
            }
        </script>
        
    </body>
</html>
bubuko.com,布布扣

 

纯js模拟 radio和checkbox控件,布布扣,bubuko.com

纯js模拟 radio和checkbox控件

标签:des   style   blog   class   code   c   

原文地址:http://www.cnblogs.com/z-Relix/p/3732612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!