Materialize CSS：复选框切换时动态修改Chips颜色问题求助

没问题，这个需求完全可以实现！我帮你整理了完整的解决方案，分两种方式供你参考：

我们需要监听复选框的change事件，每次状态切换时：

1. 获取所有已生成的Materialize Chip元素
2. 根据复选框的勾选状态，给Chip设置对应的背景色：
   • 取消勾选：所有Chip设为红色
   • 勾选：所有Chip先设为红色，再单独把最后一个Chip设为绿色

这种方式适合快速实现，不需要额外写CSS：

HTML结构 #

<div class="chips chips-placeholder"></div>
<label>
  <input type="checkbox" id="anscheck" />
  <span>Toggle Chip Colors</span>
</label>

JavaScript代码 #

$(document).ready(function() {
  // 初始化Materialize Chips
  $('.chips-placeholder').chips({
    placeholder: 'Enter options',
    secondaryPlaceholder: '+Options',
    limit: 6
  });

  // 监听复选框状态变化
  $('#anscheck').change(function() {
    const isChecked = $(this).is(':checked');
    const allChips = $('.chips .chip');

    // 如果还没有添加任何Chip，直接返回
    if (allChips.length === 0) return;

    // 先统一把所有Chip设为红色（Materialize官方红色值）
    allChips.css('background-color', '#ef5350');

    if (isChecked) {
      // 勾选状态下，把最后一个Chip设为绿色（Materialize官方绿色值）
      $(allChips[allChips.length - 1]).css('background-color', '#66bb6a');
    }
  });
});

这种方式遵循CSS与JS分离的原则，后续修改颜色或样式会更方便：

自定义CSS #

/* 红色Chip样式 */
.chip-red {
  background-color: #ef5350 !important;
}

/* 绿色Chip样式 */
.chip-green {
  background-color: #66bb6a !important;
}

JavaScript代码 #

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

  $('#anscheck').change(function() {
    const isChecked = $(this).is(':checked');
    const allChips = $('.chips .chip');

    if (allChips.length === 0) return;

    // 移除所有颜色类，统一添加红色类
    allChips.removeClass('chip-green').addClass('chip-red');

    if (isChecked) {
      // 给最后一个Chip切换为绿色类
      $(allChips[allChips.length - 1]).removeClass('chip-red').addClass('chip-green');
    }
  });
});

注意点 #

• 我用的是Materialize官方的red lighten-1和green lighten-1颜色值，你可以根据需求换成其他Materialize颜色或者自定义RGB/HEX值
• 如果后续动态添加/删除Chip，这个逻辑依然有效，因为每次复选框变化都会重新获取所有Chip元素

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