Javascript 显示/隐藏<；span>；标签

我想使用javascript隐藏具有特定id或类的标记。我为每个span标记保留了一个名为“ch”的ID和类（为每个span添加不同的ID和类对我来说非常困难）
我有一个复选框，它将切换项目的可见性
现在问题来了：
-单击复选框一次，所有内容都隐藏得很好
-第二次单击它（再次显示），标签中的所有内容将显示在屏幕左侧。
-再次单击它，一切都变得疯狂

我希望代码在单击时显示/隐藏跨距标记，当跨距被隐藏时，我不希望该行保留在那里。我希望删除整行，当它再次设置为可见时，我希望这些行重新出现。我希望有人能帮助我。代码如下：

function sh_chords() {

    tmp_log += "sh_c|";
    var b = document.getElementById("showing_chords").checked;
    for (i = 1; i <= lcnt; i++) {
        el = document.getElementById("ch");
        try {
            if (!b) {

                el.style.color = "black";
                el.style.cursor = "default";
                $(".ch").hide();

            } else {
                el.style.color = "#0000FF";
                el.style.cursor = "pointer"

                $(".ch").show();
            }
        } catch (d) {}
    }
}

函数sh_和弦（）{
tmp_log+=“sh_c |”；
var b=document.getElementById（“显示和弦”）。选中；
对于（i=1；i，因为您正在使用jquery，所以可以使用它的helper函数，该函数专门用于切换可见性

$('.ch').toggle( $('#showing_chords').prop('checked') );

您不能重用ID。两个不相关的问题：在一个地方您使用jquery，但在另一个地方您使用getElementById。此外，您还有一个循环，它在每次迭代中执行完全相同的操作