Checkbox onclick Event Handler and show/hide function

Question

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 ?

VisioN · Accepted Answer · 2012-05-15 12:58:32Z

1

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.

answered May 15, 2012 at 12:58

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbabey · Accepted Answer · 2012-05-15 12:58:47Z

0

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.

answered May 15, 2012 at 12:58

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

3 Comments

keune Over a year ago

Not unpredictable. It chooses the first one.

jbabey Over a year ago

@keune true, but now you are imposing order dependency on your elements, not to mention your HTML is invalid.

keune Over a year ago

@jbaey no, i just stated that when there are multiple elements with the same id, document.getElementById returns the first one. I agree that it's totally bad practise.

Collectives™ on Stack Overflow

Checkbox onclick Event Handler and show/hide function

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related