Javascript 更改复选框上的芯片颜色更改具体化css

我已经在网上搜索了，但我找不到问题的解决方案

我正在使用MaterializeCSS芯片，我想要的是，无论何时选中复选框，最后一个芯片的颜色都应该变为绿色，其他芯片的颜色应该变为红色，如果不选中，它们都会变为红色

我不知道这是否可行，因为我已经设定了条件

$('.chips-placeholder').chips({
    placeholder: 'Enter options',
    secondaryPlaceholder: '+Options',
    limit:6
});

$(document).ready(function() {
    $('#anscheck').change(function() {
        if($("#anscheck").is(":checked")){

        }    
    });
});

html

关
在…上

编辑：设置

onChipAdd

和

onChipDelete

事件以在添加或删除芯片时更改颜色

我会在没有jQuery方法的情况下初始化芯片组件

1） 拿到所有的筹码

$（chipInstance[0].$chips）

2） 循环遍历所有芯片，检查芯片的（索引+1）是否等于所有芯片的数量。（原因索引是从零开始的。）

3） 添加类以更改字体颜色

下面是一个演示：

let target=$（'.chips占位符'）；
让选项={
占位符：“输入选项”，
第二个占位符：“+选项”，
限额：6，
onChipAdd:function（）{
CheckChipsColor（）；
},
onChipDelete:function（）{
CheckChipsColor（）；
}
}
让chipInstance=M.Chips.init（目标，选项）
$（'#anscheck'）.change（function（）{
CheckChipsColor（）；
});
函数检查芯片颜色（）{
让allChips=$（chipInstance[0].$chips）；
allChips.removeClass（“红绿色”）；
如果（$（“#anscheck”）。是（“：checked”））{
所有芯片。每个（功能（索引、元素）{
让颜色=（索引+1）=allChips.length？'green'：'red'；
$（元素）.addClass（颜色）
})
}
}

.red{
颜色：红色；
}
格林先生{
颜色：绿色；
}

关
在…上

你能提供一个HTML的示例吗？@Scoots是的，当然可以。你刚刚救了我和其他需要类似东西的人的命！然而，我注意到在复选框被选中后，我输入了另一个筹码，最后输入的筹码没有变成绿色。我必须取消选中并再次选中复选框，使其变为绿色。你也能帮忙吗？附言：这不是很重要，但对用户的体验很重要。我也喜欢你详细解释的方式。

                   <div class="row opt">
                       <div class="col m4 s10 offset-m3 chips-placeholder">
                           <input type="text" name="opts[]">
                       </div>
                       <div class="col m4 s10 switch correctans">
                        <label>
                          Off
                          <input type="checkbox" id='anscheck'>
                          <span class="lever"></span>
                          On
                        </label>
                       </div>
                   </div> 

allChips.each(function(index, element){
  let Color = (index+1) == allChips.length ? 'green' : 'red';
  $(element).addClass(Color)
})