チェックボックスを表示img

Question

これを行うようにしています。チェックボックスをオンまたはオフにすると、imgが表示されたり消えたりします。今のところ、ボックスをチェックすると、4つの画像のすべてがちょうど1つではなく表示されます。また、document.readyを何度も使用するのが間違っているのだろうかと思いましたか？これは私が持っているものです：あなたはあなたのチェックボックスのIDを作成する必要が

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> 

Answer 1

$(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">

。

チェックボックスのイベントリスナー内で、ボックスが選択されているかどうかをチェックする必要があります。 IF ELSEを使うのが好きです。