首页 / 脚本样式 / JavaScript / 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>