Javascript 如何使多个document.getElementById（）在同一页面上工作？

我正在研究一个类似的函数。问题是在同一页上会有几个类似的按钮。当我只有一个的时候，一切都很好，如果超过一个，最上面的一个工作，其余的就不工作了。不幸的是，我无法更改

like

和

like2

id。那么，有没有办法让多个

document.getElementById（）

在同一页面上工作？我尝试将它们更改为

document.getElementsByCassName（）[0]

并更新脚本，认为类名可能有效，但实际上无效。它的作用与

document.getElementById（）相同


函数myFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“like”）；
如果（checkBox.unchecked==true）{
text.style.display=“内联块”；
}否则{
text.style.display=“无”；
}
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“like2”）；
如果（checkBox.unchecked==true）{
text.style.display=“无”；
}否则{
text.style.display=“内联块”；
}
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“like”）；
如果（checkBox.checked==true）{
text.style.display=“无”；
}否则{
text.style.display=“内联块”；
}
您应该使用
document.queryselectoral（“#myCheck”）；

使用
document.querySelector（selector）
可以定位/获取所有使用选择器的元素。选择器的格式与使用CSS设置元素样式时使用的格式相同

document.querySelectorAll（选择器）
选择具有匹配属性/选择器的所有元素

例如：

<script type="text/javascript">
var checkBoxes = document.querySelectorAll("#myCheck<?php echo $favid;?>");

checkBoxes.forEach(function (checkBox) {
    if (checkBox.checked) {
        text.style.display = "none";
    }
    else {
        text.style.display = "inline-block";
    }
});
</script>


var复选框=document.queryselectoral（#myCheck”）；
复选框。forEach（函数（复选框）{
如果（复选框。选中）{
text.style.display=“无”；
}
否则{
text.style.display=“内联块”；
}
});

我希望这会有所帮助，谢谢大家。我终于找到了答案。我所需要做的就是在HTML和javascript代码中添加
（这使它们独一无二，因为
$favid
对于所有帖子都是独一无二的）：


函数myFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“like”）；
如果（checkBox.unchecked==true）{
text.style.display=“内联块”；
}否则{
text.style.display=“无”；
}
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“like2”）；
如果（checkBox.unchecked==true）{
text.style.display=“无”；
}否则{
text.style.display=“内联块”；
}
var checkBox=document.getElementById（“myCheck”）；
var text=document.getElementById（“like”）；
如果（checkBox.checked==true）{
text.style.display=“无”；
}否则{
text.style.display=“内联块”；
}
id
，不管怎样，每个文档都需要是唯一的。这些函数是如何调用的？是通过单击来调用的吗？这些“相似按钮”的标记到底是什么样子的？伙计，你需要提供更多的信息，如共享HTML或解释如何调用这些逻辑。有一些方法可以实现这一点，但最好在你清楚你想要什么之后再解释。同样，你不能有多个元素具有任何给定的
id
值。这是无效的HTML，你必须修复它。没有其他选项。不确定，也许我做得不对，但是代码不起作用。即使是顶部的按钮也不起作用（它对旧代码起作用）。好的，谢谢。我已经修复了它。它应该是
复选框。forEach（…）
而不是
复选框。forEach（…）
<script type="text/javascript">
var checkBoxes = document.querySelectorAll("#myCheck<?php echo $favid;?>");

checkBoxes.forEach(function (checkBox) {
    if (checkBox.checked) {
        text.style.display = "none";
    }
    else {
        text.style.display = "inline-block";
    }
});
</script>

<script>
function myFunction<?php echo $favid;?>() {
var checkBox = document.getElementById("myCheck<?php echo $favid;?>");
var text = document.getElementById("like <?php echo $favid;?>");
if (checkBox.unchecked == true){
text.style.display = "inline-block";
} else {
text.style.display = "none";
}

var checkBox = document.getElementById("myCheck<?php echo $favid;?>");
var text = document.getElementById("like2 <?php echo $favid;?>");
if (checkBox.unchecked == true){
text.style.display = "none";
} else {
text.style.display = "inline-block";
}

var checkBox = document.getElementById("myCheck<?php echo $favid;?>");
var text = document.getElementById("like <?php echo $favid;?>");
if (checkBox.checked == true){
text.style.display = "none";
} else {
text.style.display = "inline-block";
}

</script>