<style type="text/css">
        .aaa
    {
            border: 1px hidden #0000FF;
            width: 100px;
            height: 60px;
            background-color: #cccccc;
        }
</style>
<input name="bigclassauthorize" id="bigclassauthorize" type="checkbox"   onclick="bigChange(this)"/>大類
<div class="aaa">
<input name="smallclassauthorize" type="checkbox"  onclick="smallChange(this)" value="小類一"/>小類一<br />
<input name="smallclassauthorize" type="checkbox" onclick="smallChange(this)" value="小類二"/>小類二<br />
<input name="smallclassauthorize" type="checkbox" onclick="smallChange(this)" value="小類三"/>小類三
</div>

<script language="javascript" type="text/javascript">
    function bigChange(obj) {
        if (obj.checked == false) {
            var smObj = document.getElementsByName("smallclassauthorize");
            for (var i = 0; i < smObj.length; i++)
                smObj[i].checked = false;
        }
    }
    function smallChange(obj) {
        var smObj = document.getElementsByName("smallclassauthorize");
        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;

        }
    }
</script>