AngularJS实现勾选复选框时显示指定图片的方法

你当前代码不生效有3个核心问题：

• 选择器匹配错误：你监听的是name=reserv1的输入框，但实际页面复选框的name属性是reserv，事件根本绑定不上
• 违背AngularJS设计逻辑：AngularJS靠双向绑定+脏检查机制同步数据和视图，你用jQuery事件修改$scope变量后，没有主动触发脏检查，视图不会自动更新
• 冗余DOM操作：AngularJS会自主处理页面编译渲染流程，不需要手动写$(document).ready这类DOM就绪监听

完全不需要引入jQuery，用AngularJS自带的指令就能实现，逻辑更简洁也更易维护。

调整HTML视图部分 #

给复选框加ng-model绑定勾选状态，新增目标图片节点，用显隐指令控制展示逻辑：

<body ng-app="imgApp" ng-controller="imgCNTRL">
<li class="stay-item" name="hotel" id="hotel1">
    <h2>Hotel Grande Bretagne</h2>
    <img src="https://www.fivestaralliance.com/files/fivestaralliance.com/field/image/nodes/2009/10181/10181_0_hotelgrandebretagne_fsa-g.jpg">
    <p class="img__description">
        Facilities
        <br><br>
        2 swimming pools
        <br>
        Free WiFi
        <br>
        Parking
        <br>
        Spa / Sallon
        <br>
        Bar
        <br>
    </p>
    <br><br>
    <div class="form-check">
        <!-- 用ng-model绑定复选框勾选状态 -->
        <input class="form-check-input" type="checkbox" id="reserv" name="reserv" ng-model="isReserved">
        <label class="form-check-label" for="reserv">Reservation</label>
    </div>
    <!-- 勾选时展示目标图片 -->
    <img ng-if="isReserved" ng-src="{{reservedImgUrl}}" alt="reserved preview">
</li>

调整控制器JS部分 #

只需要在作用域上定义目标图片地址即可，不需要写任何DOM事件监听逻辑：

var app = angular.module('imgApp', []);
app.controller('imgCNTRL', function($scope){
    // 直接在作用域定义需要展示的目标图片地址
    $scope.reservedImgUrl = "https://t-cf.bstatic.com/xdata/images/hotel/max1024x768/328010584.jpg?k=f8243c30e30a6671e3a618ed132f42d10bccd185b464caec8e7bbcb82915d837&o=&hp=1";
});

• ng-model="isReserved"会自动把复选框的勾选状态（布尔值，勾选为true，取消勾选为false）双向绑定到作用域变量，不需要手动监听点击事件
• ng-if="isReserved"会持续监听isReserved的状态变化，值为true时才会把图片节点渲染到页面，值为false时自动移除节点
• 图片地址用ng-src而非原生src属性，是为了避免Angular还没完成表达式解析时，浏览器把{{reservedImgUrl}}当成真实地址发起无效请求
• 如果需要图片常驻DOM、仅切换显示/隐藏状态，把ng-if换成ng-show即可，二者区别是ng-show仅通过CSS的display属性控制显隐，不会增删DOM节点

内容的提问来源于stack exchange，提问作者user19384320