代碼待優化,功能實現了,不兼容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>