Question

当某人点击复选框时，我希望显示某个图像。我不确定我是否使用jquery，Ajax。我用了什么？

如果有人帮忙，我将不胜感激。我已经创建了复选框，但我如何链接它要检查的图像显示和不显示？

Answer 1

试试这个：
HTML：

<input type="checkbox" onclick="show_img()" id="check" value="whatever" name="whatever">whatever</input>
<div id="img"></div>

使用Javascript：

function show_img(){
 if (document.getElementById("check").checked){
 document.getElementById("img").innerHTML="<img src='path to your image'>";
 }
}

Answer 2

我为你尝试了一个非常简单的例子

<input type="checkbox">Show Image</input>
<img src="a.jpg" alt="A image" style="height: 200px;width:200px">


$(document).ready(function(){
  $('img').hide();
  $('input:checkbox').change(function(){
    this.checked?$('img').show():$('img').hide();
  })
});

Answer 3

您只是想要显示图像，还是具有切换效果？以下是如何显示隐藏的图像。

CSS：

#your_img {
    display: none;
}

HTML：

<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="a.jpg" alt="A image" style="height: 200px;width:200px">
</div>

使用Javascript：

一次显示图片的脚本。小提琴：http://jsfiddle.net/826cV/1/

$('#show_image').one("click", function(){
    $('#your_img').show();
});

切换图片的脚本。小提琴：http://jsfiddle.net/826cV/

$('#show_image').on("click", function(){
    if( $('#your_img').is(':hidden')) {
    $('#your_img').show();
    }else{
    $('#your_img').hide();
    }
});

如何在选中复选框时显示图像，并在未选中时消失（html）

3 个答案: