mercredi 26 avril 2017

Checkbox show img

I'm trying to make it so, when you checked/uncheck a checkbox, the img appears/disappears. As of now, when I checked a box, all 4 of the images appear instead of just the one. Also I was wondering is it wrong to use document.ready multiple times? This is what I have:

  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>




Aucun commentaire:

Enregistrer un commentaire