根据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">
        "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>
    id="option-laptop" class="slidebox-right">
        "checkbox" name="yon" id="lightyon" class="optioninput" value="light" onclick="light()">
                
        "checkbox" name="yon" id="tabletyon" class="optioninput" value="tablet" onclick="tablet()">

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

    
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>

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>

参考如下，7种改变：

var str_key='';//选中的值
var all_arr=['light':'1.jpg','tablet':'2.jpg','micro':'3.jpg','light_tablet':'4.jpg','light_micro':'25jpg','tablet_micro':'6.jpg','light_tablet_micro':'7.jpg'];//全部值
$("input[name='yon']").each(function(){
   if($(this).attr("checked")){
     str_key=(str_key!='')? str_key+'_'+$(this).val():$(this).val();
  }
})

})
if(str_key!=''){//
   $('#laptop-img').attr("src",all_arr[str_key]);
}

改变的都是id="laptop-img"吗？

 $('input[type=checkbox]').click(function(){
    var len=$("input[name='yon']:checked").length;
     alert("多选框选中个数："+len);      
 });

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632