Php 复选框onclick事件处理程序和show/hide函数_Php_Javascript_Checkbox_Event Handling

Php 复选框onclick事件处理程序和show/hide函数

php javascript checkbox

Php 复选框onclick事件处理程序和show/hide函数,php,javascript,checkbox,event-handling,Php,Javascript,Checkbox,Event Handling,因此，我尝试创建动态复选框，在单击时显示/隐藏某些内容。我有这个，但无法让它正常工作： <html> <head> <title>Checkbox Event Handler</title> <style type="text/css"> #myGroup {visibility:hidden} </style> <script type="text/java

因此，我尝试创建动态复选框，在单击时显示/隐藏某些内容。我有这个，但无法让它正常工作：

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


复选框事件处理程序
#myGroup{可见性：隐藏}
功能切换（chkbox，组）{
var VISSETING=（chkbox.checked）？“可见”：“隐藏”；
document.getElementById（组）.style.visibility=visSetting；
} 
函数交换（radBtn，组）{
var MODEMSVISSETING=（组==“调制解调器”）？（（radBtn.checked）？“”：“无”）：“无”；
document.getElementById（“调制解调器”）.style.display=modemsVisSetting；
} 
显示结果

它正常打开$seka中的第一个字符串，工作正常，但是第二个复选框在第一个字符串中？我肯定我做了一些非常愚蠢的事情，但我对编程还是新手。

有人帮忙吗？

我看到的问题是，在每个

循环迭代中，您都添加了具有相同id
属性的元素span
。设置唯一的ID，将JavaScripttoggle
函数更改为指定的span
地址，它就会工作。
我对PHP不是很熟悉，但似乎生成了多个具有相同ID的span
元素，这将导致document.getElementById
以不可预知的方式运行。
不是不可预知的。它选择第一个。@keune true，但现在您对元素施加顺序依赖，更不用说您的HTML无效。@jbaey否，我刚才说过，当有多个元素具有相同的id时，document.getElementById
返回第一个元素。我同意这是完全不好的做法。