使用复选框切换图片显示

时间:2017-03-15 04:52:36

标签: javascript html

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

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)

2 个答案:

答案 0 :(得分:0)

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

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

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

玩得开心!

答案 1 :(得分:0)

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

<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