js获取后台返回的ajax数据 , 是Integer集合 , 现在想遍历这个data

1 . 后台返回了 一个 Listlist 集合给前台ajax ;

2 . 前台页面显示console.log(data) 格式为 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] , 其中'0'
有可能是1 , 就是集合里面只会是0 或者 1

3 . 现在想获取每一个数字的下标 , 下面是js的ajax请求 , allStatus 是点击全选复选框后 , 所有value 的 数组

/* 点击全选复选框时触发的事件 */
$('#checkall').on("click", function() {
    var url = $(this).parents('li').find('img');
    $('input[name="station_name"]').each(function() {
        $(this).prop("checked", true);

    })
    console.log(this)

    $('input[name="station_name"]:checked').each(function(i) {
        if (this.checked) {
            allStatus[i] = this.value;
        }
    });
    console.log(allStatus)
    $.ajax({
            data : {
                'allStatus' : allStatus
            },
            type : "get",
            url : "/PaStation/getAllStatus",
            dataType : "text",
            traditional : true,
            success : function(data) {
                arr = data
                console.log(arr)


                /*if (data == 1) {
                    url.attr('src', '../images/pademo_green.png');
                } else {
                    url.attr('src', '../images/pademo_blue.png');
                }*/
            }
        })





    //url.attr('src', '../images/pademo_green.png');
});

4 . 现在想根据 , 0 或者 1 , 给每个复选框展示不同的图片 , 也就是 Green 或者 blue , 因为对js 实在不熟悉 , 卡了 很久 , 希望有前端大佬可以帮助我这个菜鸟

5 . 感谢大家的帮助 , 有什么对问题不清晰的地方可以留言 , 我详细说明一下 , 再次提前感谢各位大佬的帮助 谢谢

问题补充 : 下面是复选框内容的代码片段

<div class="box">
                <ul class="box-list clearfix">
                    <li>
                        <div class="index">01</div>
                        <div class="img"><img src="../static/images/pademo_grey.png" th:src="@{/images/pademo_grey.png}"  alt=""></div>
                        <label><input type="checkbox" name="station_name" id="1" value="1" />七莘路</label>
                    </li>
                    <li>
                        <div class="index">02</div>
                        <div class="img"><img src="../static/images/pademo_grey.png" th:src="@{/images/pademo_grey.png}"></div>
                        <label><input type="checkbox" name="station_name" id="2" value="2" />虹莘路</label>
                    </li>

$(".box").find("img").each(function(index,ele){//遍历所有图片
if(data[index] == 1){//判断图片对应的数据
$(this).attr('src', '../images/pademo_green.png');

}else if(data[index] == 0){
$(this).attr('src', '../images/pademo_blue.png');

}

})

遍历集合用

for(var el of data){
                if (el === 1) {
                        url.attr('src', '../images/pademo_green.png');
                } else {
                        url.attr('src', '../images/pademo_blue.png');
                }
}

你checkbox个数是固定的还是动态的,你返回数组只有0、1,这怎么对应上呢?还是依次遍历对应上就行了、不需要关联关系,这样的话,
请用下面代码:

$.each($(".box").children(".img"),function(idx,val){//遍历你现有的checkbox上面的图片标签div
        if(arr[idx]==1||arr[idx]=='arr[idx]==1')//判断你数组对应checkbox的下标的值,为空则blue
        url.attr('src', '../images/pademo_green.png');
        url.attr('src', '../images/pademo_blue.png');
});