checkbox 多选框 联动实现代码 |
本文标签:checkbox,多选框,联动 父类 复制代码 代码如下: <input type="checkbox" name="father" forcheckboxgroup="groupname1"/> 子类 复制代码 代码如下: <input type="checkbox" name="son" group="groupname1"/> 实现代码 复制代码 代码如下: <script type="text/javascript"> function CheckboxGroup(){ var arrelement = document.all; var i=0; while(i<arrelement.length){ var forgroupattrib = arrelement[i].getAttribute(forcheckboxgroup); if(forgroupattrib != null && forgroupattrib != ){ arrelement[i].setAttribute(groupmember,_getGroupMember(arrelement[i])); if(arrelement[i].tagName.toLowerCase() == input && arrelement[i].type == checkbox){ arrelement[i].onclick=function(){ //----------------------Checked All------------------ var groupmember = this.getAttribute(groupmember); var i = 0; while(i<groupmember.length){ groupmember[i].checked = this.checked; i++; } //--------------------------------------------------- } } _setState(arrelement[i]); } i++; } } function _getGroupMember(o){ var groupname = o.getAttribute(forcheckboxgroup); var items = new Array; var inputs = document.getElementsByTagName(input); var i=0; while(i<inputs.length){ if(inputs[i].type == checkbox){ var groupattrib = inputs[i].getAttribute(group); if(groupattrib == groupname){ items[items.length] = inputs[i]; var master = inputs[i].getAttribute(groupmaster); if (master == null) { master = new Array; master[0] = o.uniqueID; inputs[i].setAttribute(groupmaster, master); } else{ master[master.length] = o.uniqueID; } inputs[i].onpropertychange = function(){ if (event.propertyName == checked) { var arro = this.getAttribute(groupmaster); var i = 0; while (i < arro.length) { _setState(document.getElementById(arro[i])); i++; } } } } } i++; } return items; } function _setState(o){ var master = o; if(master!=null){ var chkselall = true; var chknosel = true; var groupmember = master.getAttribute(groupmember); var i = 0; while(i<groupmember.length){ if(chkselall)chkselall = groupmember[i].checked; if(chknosel)chknosel = !groupmember[i].checked; i++; } if(master.tagName.toLowerCase() == input&&master.type==checkbox){ if (chkselall) { master.indeterminate = false; master.checked = true; } if (chknosel) { master.indeterminate = false; master.checked = false; } if(!chkselall&&!chknosel)master.indeterminate = true; } else{ master.disabled = chknosel; } } } window.attachEvent(onload,CheckboxGroup); </script> |