简明现代魔法 -> JavaScript -> 改进版的checkbox归类联动

改进版的checkbox归类联动

2010-06-03

昨天写了一篇Checkbox按归类联动,现在对它进行了一些扩充,让它可以实现中英文联动。

需求就是,点击上面中文部分的任意一个checkbox,下面英文部分对应的checkbox也会被选中。其它逻辑部分与Checkbox按归类联动相同。

编程语言

C

PHP

Java

Program Languages

C

PHP

Java

JavaScript Code

function bigChange(obj) 
{
	if (obj.checked == false) 
	{
		var smObj = []; 
		smObj[0] = document.getElementById("smallClassAuthorize01");
		smObj[1] = document.getElementById("smallClassAuthorize02");
		smObj[2] = document.getElementById("smallClassAuthorize03");
		var bigObjEn = document.getElementById("bigClassAuthorizeEn");
		for (var i = 0; i < smObj.length; i++)
		{
			smObj[i].checked = false;
		}
		bigObjEn.checked = false;
	}
	else if(obj.checked == true) 
	{
		var bigObjEn = document.getElementById("bigClassAuthorizeEn");
		bigObjEn.checked = true;
	}
	bigChangeEn(obj);
}

function smallChange(obj) 
{
	//var smObj = document.getElementsByName("smallClassAuthorize");
	var smObj = []; 
	smObj[0] = document.getElementById("smallClassAuthorize01");
	smObj[1] = document.getElementById("smallClassAuthorize02");
	smObj[2] = document.getElementById("smallClassAuthorize03");
	var smObjEn = []; 
	smObjEn[0] = document.getElementById("smallClassAuthorizeEn01");
	smObjEn[1] = document.getElementById("smallClassAuthorizeEn02");
	smObjEn[2] = document.getElementById("smallClassAuthorizeEn03");
	var bigObj = document.getElementById("bigClassAuthorize");
	var bigObjEn = document.getElementById("bigClassAuthorizeEn");
	if (obj.checked == true)
	{
		bigObj.checked = true;

		for (var i = 0; i < smObj.length; i++) 
		{
			if (smObj[i].checked == true)
			{
				smObjEn[i].checked = true;
				//alert(smObjEn[i].checked);
				//b = false;
			}
		}

	}
	else 
	{
		b = true;
		for (var i = 0; i < smObj.length; i++) 
		{
			if (smObj[i].checked == true)
			{
				smObjEn[i].checked = true;
				//alert("11");
				b = false;
			}
			else if(smObj[i].checked == false)
			{
				smObjEn[i].checked = false;
			}
		}
		if (b == true)
		bigObj.checked = false;
	}
	bigChange(obj);
}


function bigChangeEn(obj) 
{
	if (obj.checked == false) 
	{
		var smObjEn = []; 
		smObjEn[0] = document.getElementById("smallClassAuthorizeEn01");
		smObjEn[1] = document.getElementById("smallClassAuthorizeEn02");
		smObjEn[2] = document.getElementById("smallClassAuthorizeEn03");
		var bigObj = document.getElementById("bigClassAuthorize");
		for (var i = 0; i < smObjEn.length; i++)
		{
			smObjEn[i].checked = false;
		}
		bigObj.checked = false;
	}
	else if(obj.checked == true) 
	{
		var bigObj = document.getElementById("bigClassAuthorize");
		bigObj.checked = true;
	}
	bigChange(obj);
}

function smallChangeEn(obj) 
{
	//var smObj = document.getElementsByName("smallClassAuthorize");
	var smObj = []; 
	smObj[0] = document.getElementById("smallClassAuthorize01");
	smObj[1] = document.getElementById("smallClassAuthorize02");
	smObj[2] = document.getElementById("smallClassAuthorize03");
	var smObjEn = []; 
	smObjEn[0] = document.getElementById("smallClassAuthorizeEn01");
	smObjEn[1] = document.getElementById("smallClassAuthorizeEn02");
	smObjEn[2] = document.getElementById("smallClassAuthorizeEn03");
	var bigObj = document.getElementById("bigClassAuthorize");
	var bigObjEn = document.getElementById("bigClassAuthorizeEn");
	if (obj.checked == true)
	{
		bigObjEn.checked = true;

		for (var i = 0; i < smObjEn.length; i++) 
		{
			if (smObjEn[i].checked == true)
			{
				smObj[i].checked = true;
				//alert(smObjEn[i].checked);
				//b = false;
			}
		}

	}
	else 
	{
		b2 = true;
		for (var i = 0; i < smObjEn.length; i++) 
		{
			if (smObjEn[i].checked == true)
			{
				smObj[i].checked = true;
				//alert("11");
				b2 = false;
			}
			else if(smObjEn[i].checked == false)
			{
				smObj[i].checked = false;
			}
		}
		if (b2 == true)
		bigObjEn.checked = false;
	}
	bigChangeEn(obj);
}

HTML code

<input id="bigClassAuthorize" type="checkbox" onclick="bigChange(this)"/> 编程语言
<div class="test">
<p style="text-indent:2em"><input id="smallClassAuthorize01" type="checkbox" onclick="smallChange(this)" value="小类一"/> C</p>
<p style="text-indent:2em"><input id="smallClassAuthorize02" type="checkbox" onclick="smallChange(this)" value="小类二"/> PHP</p>
<p style="text-indent:2em"><input id="smallClassAuthorize03" type="checkbox" onclick="smallChange(this)" value="小类三"/> Java</p>
</div>

<input id="bigClassAuthorizeEn" type="checkbox" onclick="bigChangeEn(this)"/> Program Languages
<div class="test">
<p style="text-indent:2em"><input id="smallClassAuthorizeEn01" type="checkbox" onclick="smallChangeEn(this)" value="小类一"/> C</p>
<p style="text-indent:2em"><input id="smallClassAuthorizeEn02" type="checkbox" onclick="smallChangeEn(this)" value="小类二"/> PHP</p>
<p style="text-indent:2em"><input id="smallClassAuthorizeEn03" type="checkbox" onclick="smallChangeEn(this)" value="小类三"/> Java</p>
</div>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们