Question

我尝试这样做，当您选中/取消选中复选框时，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>

Answer 1

＆＃13;

$(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();
    }
});

＆＃13;

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

＆＃13;

您需要为复选框创建ID。

在复选框的事件监听器中，您必须检查是否已选中该框。我喜欢使用IF ELSE。

复选框显示img

1 个答案: