Question

所以，我正在尝试编写一些代码，当您选中复选框时，它会停止在我的网站上显示图片。我的文本软件和控制台中没有语法错误。任何人都可以告诉我这段代码有什么问题吗？

function Checkbox(element){
    var pic=document.getElementsByTagName("img");
if(element.checked==true){
    for(var i=0; i<pic.length; i++){
        pic[i].style.display="none";
    }
}
else if(element.checked==false){ 
     for(var i=0; i<pic.length; i++){
        pic[i].style.display="auto";
    }
}}; 
//picDisplay is the id of my checkbox
var picDisplay=document.getElementById("picDisplay");
picDisplay.addEventListener("click",Checkbox(picDisplay)

Answer 1

看看这个小提琴：https://jsfiddle.net/yLb1xteu/

代码中的主要问题是您需要将函数指针传递给Checkbox中的picDisplay.addEventListener函数。相反，您正在运行Checkbox函数并将结果（基本上没有任何内容）传递给addEventListener，这并没有做太多。

同样命名一个函数Checkbox并不是最好的 - 只是抛弃它。可能想要命名为togglePictures。 :)

玩得开心！

Answer 2

我已经尝试过您正在寻找的样本。

<input type="checkbox" id="picDisplay" onchange="Checkbox()"
>

<div style="width:10%;">
<img src="http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg" style="width:100%;">
</div>
<script>
function Checkbox(){
var Checkbox_value = document.getElementById("picDisplay");
    var pic=document.getElementsByTagName("img");
if(Checkbox_value.checked==true){
    for(var i=0; i<pic.length; i++){
        pic[i].style.display="none";
    }
}
else if(Checkbox_value.checked==false){ 
     for(var i=0; i<pic.length; i++){
        pic[i].style.display="block";
    }
}}; 
</script>

Try the code given above and think this is helpful

使用复选框切换图片显示

2 个答案: