简明现代魔法 -> JavaScript -> Checkbox按归类联动

Checkbox按归类联动

2010-06-02

比如大类为编程语言,而小类是C、PHP和Java,现在有这么一个需求。我选择C、PHP或Java中的一个或多个,编程语言的checkbox也需要被选中。当C、PHP或Java没有一个被选择的时候,大类编程语言也不会被选择。

效果演示

编程语言

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");
		for (var i = 0; i < smObj.length; i++)
		smObj[i].checked = false;
	}
}

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

HTML Code

<style type="text/css">
.test{ border: 1px hidden #0000FF; width:300px; background-color: #e0eee8; }
</style>

<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>
随机文章推荐
网站分类


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

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


 

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

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