複選框顯示圖片

我試圖做到這一點，當您選中/取消選中複選框時，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>

來源

2017-04-26 user7915139

你可以使用css。和+運營商 –

所以 - 代碼正在做你想要的。您已添加4個函數，每個函數都將偵聽器添加到更改事件。所以 - 當發生變化事件時，它們全部被觸發。 – MarioMucalo

另外 - 當你有4個功能完全相同的代碼和不同的參數時 - 通常意味着你做錯了什麼。您可能只需要一個，並將div的ID作爲參數傳遞給它。 – MarioMucalo

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

來源

2017-04-26 23:08:42

謝謝！這真的有幫助！ – user7915139

如果我的答案回答了，請單擊接受答案，以便其他人，與您有同樣的疑問，知道有一個正確的答案來解決他們的問題。 –

複選框顯示圖片

回答

相關問題