JQ复选框，选择后按钮触发后出现图片，可同时出现多个图片

最新推荐文章于 2021-06-20 21:52:38 发布

原创最新推荐文章于 2021-06-20 21:52:38 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #JQuery #新手 #JQ

HTML5 专栏收录该内容

54 篇文章

订阅专栏

这是一个简单的网页应用，用户可以选择喜欢的水果，点击按钮后，选择的水果图片会在页面底部显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

        table {
            border: 1px solid red;

        }

        .td1 {
            height: 240px;
        }

        img {
            width: 200px;
            height: 200px;
        }
    </style>
    <title>Title</title>
    <script src="../../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<table align="center">
    <tr>
        <td class="td1" rowspan="7" valign="bottom"><img id="img" src="shui.jpg" alt=""></td>
        <td><h2>选择你喜欢的水果：</h2></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="1" name="shuiguo" id="pingguo">苹果
            <input type="checkbox" value="2" name="shuiguo" id="xiangjiao">香蕉
            <input type="checkbox" value="3" name="shuiguo" id="putao">葡萄
            <input type="checkbox" value="4" name="shuiguo" id="li">梨
            <input type="checkbox" value="5" name="shuiguo" id="xigua">西瓜
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="button" value="改变图片" name="gaibian" id="gaibian">
        </td>
    </tr>
    <tr>
        <td> &nbsp;</td>
    </tr>
    <tr>
        <td> &nbsp;    </td>
    </tr>
</table>
<div id="d">

</div>
</body>
<script>
    //    var input=document.getElementsByName("shuiguo");
    var input = $("input[name='shuiguo']");
    $('#gaibian').click(function () {
        check_val = [];
        for (k in input) {
            if (input[k].checked)
                check_val.push(input[k].value);
        }
        $.each(check_val, function (i, val) {
         //   var a=Number(val)
            if (val == 1) {
                $('#d').append("<img src='pingguo.jpg'>");
            } else if (val == 2) {
                $('#d').append("<img src='xiangjiao.jpg'>");
            } else if (val == 3) {
                $('#d').append("<img src='putao.jpg'>");
            } else if (val == 4) {
                $('#d').append("<img src='li.jpg'>");
            } else if (val == 5) {
                $('#d').append("<img src='xigua.jpg'>");
            }
           /*switch (a){
               case 1:
                   $('#d').append("<img src='pingguo.jpg'>");
                   break;
               case 2:
                   $('#d').append("<img src='xiangjiao.jpg'>");
                   break;
               case 3:
                   $('#d').append("<img src='putao.jpg'>");
                   break;
               case 4:
                   $('#d').append("<img src='li.jpg'>");
                   break;
               case 5:
                   $('#d').append("<img src='xigua.jpg'>");
                   break;
           }*/

        })
    })
</script>
</html>