西西木科技丨Shopify开发机构 2022-09-15 13:19 采纳率: 96.4%
浏览 53
已结题

根据checkbox选中依次改变img src

根据checkbox选中:单选 多选 全选事件,依次改变img src

需求是:
1、单选:当选中#lightyon 或 #tabletyon 或 #microyon 时,#laptop-img会改变对应的src;
2、多选:当选中三个checkbox中的两个,#laptop-img会改变对应的src;
3、全选:当选中全部三个checkbox,#laptop-img会改变对应的src;

<div class="slidebox" id="step2-laptop" style="">
    <div class="slidebox-left">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.article.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F08%2FChMkJllcdYqIbOEXAACg2doBw50AAeFhwLKPX4AAKDx352.jpg&refer=http%3A%2F%2Fi2.article.fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665810856&t=8f121eac2d60e998b2990deae8126dbf" class="accessories-img ls-is-cached lazyloaded" id="laptop-img">
    </div>
    <form id="option-laptop" class="slidebox-right">
        <input type="checkbox" name="yon" id="lightyon" class="optioninput" value="light" onclick="light()">
                
        <input type="checkbox" name="yon" id="tabletyon" class="optioninput" value="tablet" onclick="tablet()">

        <input type="checkbox" name="yon" id="microyon" class="optioninput" value="micro" onclick="micro()">

    </form>
</div>

<script>
    function light() {  
        $('#laptop-img').attr("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.3dsc.com%2Fuploadfile%2F2021%2F0122%2F20210122084642551.png&refer=http%3A%2F%2Fwww.3dsc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665810876&t=f61cddf5fa6952b6adb7d39073d77fac");
    }
</script> 
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-09-15 14:30
    关注

    7种组合checkbox的value组合需要的图片放键值对里面,示例如下

    <div class="slidebox" id="step2-laptop" style="">
        <div class="slidebox-left">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.article.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F08%2FChMkJllcdYqIbOEXAACg2doBw50AAeFhwLKPX4AAKDx352.jpg&refer=http%3A%2F%2Fi2.article.fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665810856&t=8f121eac2d60e998b2990deae8126dbf" class="accessories-img ls-is-cached lazyloaded" id="laptop-img">
        </div>
        <form id="option-laptop" class="slidebox-right">
            <input type="checkbox" name="yon" id="lightyon" class="optioninput" value="light" onclick="setSrc()">
    
            <input type="checkbox" name="yon" id="tabletyon" class="optioninput" value="tablet" onclick="setSrc()">
    
            <input type="checkbox" name="yon" id="microyon" class="optioninput" value="micro" onclick="setSrc()">
    
        </form>
    </div>
    
    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //7种组合checkbox的value组合需要的图片放这里面,其他6张从jd随机搞来的,自己改下
        //注意键名称组合时value出现循序不能反
        var kvImgSrc = {
            light: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.3dsc.com%2Fuploadfile%2F2021%2F0122%2F20210122084642551.png&refer=http%3A%2F%2Fwww.3dsc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665810876&t=f61cddf5fa6952b6adb7d39073d77fac',
            tablet: 'https://img10.360buyimg.com/seckillcms/s140x140_jfs/t1/15577/37/17912/100093/631b1172Edccc6525/c72a9085c975e1fc.png.avif',
            micro: 'https://img20.360buyimg.com/seckillcms/s140x140_jfs/t1/98606/5/20394/512369/61e63435E84e43efa/093cb1b61bff97b1.jpg.avif',
            lighttablet: 'https://img13.360buyimg.com/seckillcms/s140x140_jfs/t1/104950/14/24629/127412/623455e4E3475f201/a78dcd536ce65206.jpg.avif',
            lighttabletmicro:'https://img20.360buyimg.com/seckillcms/s140x140_jfs/t1/108823/28/33206/15962/631fe583Ee4a150a2/06dab3a93953b865.jpg.avif',
            lightmicro: 'https://img30.360buyimg.com/seckillcms/s130x130_jfs/t1/104754/12/31773/112873/62e268acE8b5c2afa/c72d1bcb6a5083ae.jpg.avif',
            tabletmicro: 'https://img14.360buyimg.com/ceco/s150x150_jfs/t1/159722/38/5682/268261/601a43e3E78cbacb6/60bdf8c1c170c8ae.jpg!q70.jpg.avif',
            //都不选时默认显示的图片
            '':'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.article.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F08%2FChMkJllcdYqIbOEXAACg2doBw50AAeFhwLKPX4AAKDx352.jpg&refer=http%3A%2F%2Fi2.article.fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665810856&t=8f121eac2d60e998b2990deae8126dbf'
        }
        function setSrc() {
            var key = $('#option-laptop :checkbox:checked').map(function () { return this.value }).get().join('');//得到键
            $('#laptop-img').attr("src", kvImgSrc[key]);
        }
    </script> 
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 9月23日
  • 已采纳回答 9月15日
  • 创建了问题 9月15日

悬赏问题

  • ¥15 在误装Windows server2019 后如何利用Windows.old恢复?
  • ¥20 代码实现状态连接包过滤防火墙的设计与实现
  • ¥15 vscode的红色箭头爆红和has no default export报错
  • ¥15 关于#sql#的问题:#情况描述 在用vs对项目进行调试时,出现找不到网络路径,然后查看SQL配置工具,发现SQL服务显示远程调用过程失败(相关搜索:防火墙)
  • ¥15 eNSP中基于默认路由及浮动路由的公司与分部互联和校园网综合项目
  • ¥15 主要进行描述泥浆在管路不同区段泥浆的密度不相同,泥浆的密度有高有低,此时管路的摩阻分布需要怎么计算,(标签-matlab)
  • ¥40 通过编制程序计算圆管内层流充分发展对流换热,参数如图5-4,以及公式5-16所示,要求用表5-6对程序计算准确性进行验证
  • ¥20 该学习哪个编程语言? AI会取代程序员吗?
  • ¥15 ensp如何拼通IP地址
  • ¥15 saber软件导入Ibis模型报错