Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/434.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用单个javascript更改多个复选框的范围_Javascript_Checkbox - Fatal编程技术网

使用单个javascript更改多个复选框的范围

使用单个javascript更改多个复选框的范围,javascript,checkbox,Javascript,Checkbox,我被困在这个问题上,我对HTML/JavaScript代码是新手。我正在尝试创建一个HTML代码,其中复选框必须将图像范围(或标题)更改为“CORREGIDO”。因此,许多图像的标题上都有一个参考号,但当单击该图像的复选框时,必须将字符串更改为“CORREGIDO”。到目前为止,我的HTML代码如下所示: <ul class="galeria"> <li><a href="#img1"><img src="Foto1.jpg" onerror

我被困在这个问题上,我对HTML/JavaScript代码是新手。我正在尝试创建一个HTML代码,其中复选框必须将图像范围(或标题)更改为“CORREGIDO”。因此,许多图像的标题上都有一个参考号,但当单击该图像的复选框时,必须将字符串更改为“CORREGIDO”。到目前为止,我的HTML代码如下所示:

<ul class="galeria">
    <li><a href="#img1"><img src="Foto1.jpg"   onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox"  id="exp1">  </a>
        <h2><span class="spanTxt []">OT:   4251678</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li> 
    <li><a href="#img2"><img src="Foto2.jpg"   onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox"  id="exp2"> </a>
        <h2><span class="spanTxt []">OT:   4876852</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li>
 </ul>

也许他不是最好的方法

您正在使用的JavaScript代码

document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})

function changeDisplay() 
    {document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})}
只有一个
document.getElementById('exp1').addEventListener('change',函数(e){changeDisplay()})
什么时候应该有两个

这是一个修复程序,包括这两个

document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay(e)})
document.getElementById('exp2').addEventListener('change', function(e) {changeDisplay(e)})

function changeDisplay(e) 
    {e.target.parentElement.nextElementSibling.children[1].classList.toggle('hidden')}

我更改了函数changesplay(e),因为
forEach()
函数在操作这两个元素时遇到了障碍。当复选框未选中时,代码将正确隐藏“CORREGIDO”,并在复选框选中时显示它。

谢谢您的回答,但我需要更改多个复选框的代码。我会做一个个人网页,所以我可能会用30张图片,每张都有一个复选框。除了在脚本上添加另一行之外,还有其他选择吗?是的,有,很抱歉没有想到这一点
document.queryselectoral('.confirmation').forEach(item=>{item.addEventListener('change',e=>{changesplay(e);})})
应该可以解决这个问题。我的上帝。。。我花了好几天思考这个。。。哈哈,真的谢谢你!!
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay(e)})
document.getElementById('exp2').addEventListener('change', function(e) {changeDisplay(e)})

function changeDisplay(e) 
    {e.target.parentElement.nextElementSibling.children[1].classList.toggle('hidden')}