(转)checkbox 多选框 联动实现

转载地址:http://www.zhenhua.org/?cat=14

父类
<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>


posted @ 2009-07-16 14:26  济阳补丁  阅读(680)  评论(0编辑  收藏  举报