WeGazeu
烛未
采纳率100%
2019-01-16 14:32 阅读 354

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

5
  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条回答 默认 最新

  • 已采纳
    weixin_44520574 `奋力前行 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");

    }
    

    });

    点赞 评论 复制链接分享

相关推荐