纯js模拟 radio和checkbox控件
代码待优化，功能实现了，不兼容ie8以上， 相同name的radio可以实现切换的操作， 分享代码，共同学习进步
<!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>
