純js模擬 radio和checkbox控件

代碼待優化,功能實現了,不兼容ie8以上, 相同name的radio能夠實現切換的操做, 分享代碼,共同窗習進步css

 

<!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>
相關文章
相關標籤/搜索