纯js模拟 radio和checkbox控件

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 = ‘

‘ + ‘
‘ + ‘
‘;
                
                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>