复选框显示图片
问题描述：
我试图做到这一点，当您选中/取消选中复选框时，img显示/消失。截至目前，当我检查一个盒子时，所有4张图片都出现了，而不仅仅是一张。另外我想知道使用document.ready多次是错误的吗？这是我有：复选框显示图片
Js:
$(document).ready
(
function()
{
$("#pump").hide();
$("input:checkbox").change(function() {
this.checked?$("#pump").show():$("#pump").hide();
});
});
$(document).ready
(
function()
{
$("#ski").hide();
$("input:checkbox").change(function() {
this.checked?$("#ski").show():$("#ski").hide();
});
});
$(document).ready
(
function()
{
$("#ship").hide();
$("input:checkbox").change(function() {
this.checked?$("#ship").show():$("#ship").hide();
});
});
$(document).ready
(
function()
{
$("#sun").hide();
$("input:checkbox").change(function(){
this.checked?$("#sun").show():$("#sun").hide();
});
});
Html:
<div>
<input type="checkbox"></input>
<label> Pumpkins </label>
<img src="images/pumpkins.jpg" id="pump">
<input type="checkbox"></input>
<label> Ski Resort </label>
<img src="images/ski resort.jpg" id="ski">
<input type="checkbox"></input>
<label> Bahamas </label>
<img src="images/bahamas.jpg" id="sun">
<input type="checkbox"></input>
<label> Cruise </label>
<img src="images/cruise.jpg" id="ship">
</div>
答
$(window).on("load", function() {
$("#pump").hide();
$("#ski").hide();
$("#sun").hide();
$("#ship").hide();
});
$("#id1").change(function() {
if(this.checked) {
$("#pump").show();
}
else{
$("#pump").hide();
}
});
$("#id2").change(function() {
if(this.checked) {
$("#ski").show();
}
else{
$("#ski").hide();
}
});
$("#id3").change(function() {
if(this.checked) {
$("#sun").show();
}
else{
$("#sun").hide();
}
});
$("#id4").change(function() {
if(this.checked) {
$("#ship").show();
}
else{
$("#ship").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id = "id1" type="checkbox"></input>
<label> Pumpkins </label>
<img src="images/pumpkins.jpg" id="pump">
<input id = "id2" type="checkbox"></input>
<label> Ski Resort </label>
<img src="images/ski resort.jpg" id="ski">
<input id = "id3" type="checkbox"></input>
<label> Bahamas </label>
<img src="images/bahamas.jpg" id="sun">
<input id = "id4" type="checkbox"></input>
<label> Cruise </label>
<img src="images/cruise.jpg" id="ship">您需要为您的复选框创建的ID。
并且在您的事件侦听器的复选框中，您必须检查该框是否已被选中。我喜欢tu使用IF ELSE。
+0
谢谢！这真的有帮助！ – user7915139
+0
如果我的答案回答了，请单击接受答案，以便其他人，与您有同样的疑问，知道有一个正确的答案来解决他们的问题。 –
你可以使用css。和+运营商 –
所以 - 代码正在做你想要的。 您已添加4个函数，每个函数都将侦听器添加到更改事件。所以 - 当发生变化事件时，它们全部被触发。 – MarioMucalo
另外 - 当你有4个功能完全相同的代码和不同的参数时 - 通常意味着你做错了什么。您可能只需要一个，并将div的ID作为参数传递给它。 – MarioMucalo