CODEWITHSUNDEEP
phpjavascriptcheckboxevent-handling
user1338194
user1338194

Reputation: 267

Checkbox onclick Event Handler and show/hide function

so i am trying to make dynamic checkboxs that will show/hide certain content when clicked. I have this but cannot get it to work properly:

<html> 
<head> 
    <title>Checkbox Event Handler</title> 
    <style type="text/css"> 
        #myGroup {visibility:hidden} 
    </style> 
    <script type="text/javascript"> 
        function toggle(chkbox, group) { 
            var visSetting = (chkbox.checked) ? "visible" : "hidden"; 
            document.getElementById(group).style.visibility = visSetting; 
        } 
        function swap(radBtn, group) { 
            var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; 
            document.getElementById("modems").style.display = modemsVisSetting; 
        } 
    </script>
    <?php require_once("/var/www/html/exercise/Task/functions.php"); ?>
</head> 
<body> 
    <?php
        $seqA[]="AAAAAAAAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBBBBB";
        $seqA[]="BBBBBBBBBBBBBBBBBBBBBBBBBBCCCCCCCCCCCCCCCCCCDDDDDDDDDD0";
        $seqA[]="CCCCCCCCCCCCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD";
    ?>
    <form>
    <?php
        $i=o;
        foreach($seqA as $seq){
    ?>
            <input type="checkbox" name="monitor"onclick="toggle(this, 'myGroup')" />show results
            <span id="myGroup">
     <?php
            $score=rawtransform(950);
            $truecol= getcolor($score,220);
            colorSequence($seq,5/*hit*/,$truecol,4);
        }
      ?>
            </span>
    </form>
</body>
</html>

it opens the first string in $seqA normally and works fine however the second checkbox is within the first string ? Im sure ive done something very stupid, but im new to programming. Anyone help please ?

Upvotes: 0

Views: 2173

Answers (2)

jbabey
jbabey

Reputation: 46647

I'm not very familiar with PHP, but it appears that you are generated multiple span elements with the same ID, which would cause the document.getElementById to act in unpredictable ways.

Upvotes: 0

VisioN
VisioN

Reputation: 145398

The problem I see is that in each foreach loop iteration you add element span with the same id attribute. Set unique IDs, change your JavaScript toggle function to address specified span and it will work.

Upvotes: 1

Related Questions