Div ID相同-多次隐藏/显示-缺少什么

PHP:

<input type='checkbox' onChange='DoTheSwitch(1);'><div id='Hide1'>Hide</div> 1
<input type='checkbox' onChange='DoTheSwitch(2);'><div id='Hide2'>Hide</div> 2
<input type='checkbox' onChange='DoTheSwitch(3);'><div id='Hide3'>Hide</div> 3
<input type='checkbox' onChange='DoTheSwitch(4);'><div id='Hide4'>Hide</div> 4
<input type='checkbox' onChange='DoTheSwitch(5);'><div id='Hide5'>Hide</div> 5

JavaScript:

function DoTheSwitch(a){
    var h = getEl("Hide"+a+"").innerHTML;
    switch(h){
        case "Hide":
            getEl("Hide"+a+"").innerHTML = "Show";
            $('input[id^="Hide"]').click(function(){
                $('#HideAB'+$(this).val()).hide();
            });
            break;
        case "Show":
            getEl("Hide"+a+"").innerHTML = "Hide";
            $('input[id^="Hide"]').click(function(){
                $('#HideAB'+$(this).val()).show();
            });
            break;
    }
}

输出（地图上的许多小点）：

<div id='HideAB".$Stat."' style='display:block;'></div>

根据我从数据库中提取的内容，这些"HideAB"的值将为1、2、3、4、5或6。

我想做的（目前是sleepyhead）是，每当用户选择复选框"1"时，我想隐藏所有值为1的HideAB，然后取消选中以显示，依此类推。我该如何在Javascript/JQuery部分修复这个问题？