Question

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;
    }
}

Output (Many Small Dots on Map):

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

Those “HideAB” will have a value of 1, 2, 3, 4, 5 or 6 based on what I pulled from Database.

What I’m trying to do (sleepyhead at the moment) is whenever a user select a check box “1”, I want to hide all the HideAB with a value of 1, and uncheck to show, so forth. How do I fix that in Javascript/JQuery part?

Answer 1

Id should be unique across the page, that could be what’s causing troubles. Try using a class instead if you have to handle several elements together.