烛未 2019-01-16 14:32 采纳率: 100%
浏览 355
已采纳

jquery复选框里面的内容选定后 , 根据后台状态换掉相应选项的图片

  1. 选中时触发 , 根据后台数据状态更换相应图片
  2. 取消选中时 , 回到原始图片
<body>
        <div class="AllLine">全线车站PA监控</div>x`
        <!--区域选择-->
        <div class="region">
            <p class="case_text">区域选择</p>
            <div class="box">
                <ul class="box-list clearfix">
                    <li>
                        <div class="index">01</div>
                        <div class="img"><img src="../static/imagess/pademo_grey.png" th:src="@{/imagess/pademo_grey.png}"></div>
                        <label><input type="checkbox" name="station_name" id="01" value="七莘路站" />七莘路站</label>
                    </li>
                    <li>
                        <div class="index">02</div>
                        <div class="img"><img src="../static/imagess/pademo_grey.png" th:src="@{/imagess/pademo_grey.png}"></div>
                        <label><input type="checkbox" name="station_name" id="02" value="虹莘路站" />虹莘路站</label>
                    </li>
                    <li>
                        <div class="index">03</div>
                        <div class="img"><img id="03" src="../static/imagess/pademo_grey.png" th:src="@{/imagess/pademo_grey.png}"></div>
                        <label><input type="checkbox"  name="station_name" id="03" value="03" />顾戴路站</label>
                    </li>

这个是部分html代码

$('input[name="station_name"]').click(function() {
    if (this.checked) {
         $(this).siblings('.box').find('img').attr('src', '../static/imagess/pademo_blue.png');

    } else {
        alert("hello");

    }
});

这个是我的jquery 代码 , 改了很多次总是不对 , 请大神帮忙看一下 , 万谢

  • 写回答

1条回答

  • `奋力前行 2019-01-16 14:43
    关注

    $('input[name="station_name"]').click(function() {
    var url=$(this).parents('li').find('img').attr('src');
    if (this.checked) {
    $(this).parents('li').find('img').attr('src', '../static/imagess/pademo_blue.png');
    } else {
    $(this).parents('li').find('img').attr('src',url);
    alert("hello");

    }
    

    });

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥15 Stata 面板数据模型选择
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控:网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思?
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题:我现在在做一个墨水屏设计,2.9英寸的小屏怎么换4.2英寸大屏