如何在Materialize框架中重置复选框？下拉切换时取消勾选

我之前也踩过这个坑！Materialize的表单组件会给原生HTML元素套一层自定义的样式结构，直接修改原生复选框的checked属性后，外层的视觉样式并不会自动同步——这就是你碰到的问题。

核心原因 #

Materialize的复选框是通过原生<input type="checkbox">加上相邻的<span class="lever">元素来实现视觉效果的。当用户手动点击复选框时，Materialize的JS会自动同步input的checked状态和lever的active类，但通过JS直接修改checked属性时，这个同步机制不会自动触发。

解决步骤 #

你只需要在修改原生复选框状态后，手动同步lever元素的样式即可：

示例代码（jQuery版本）

假设你的下拉选择器ID是category-select，需要取消勾选的复选框类是item-checkbox：

// 下拉值变化的触发函数
$('#category-select').on('change', function() {
  // 1. 取消原生复选框的选中状态
  $('.item-checkbox').prop('checked', false);
  // 2. 同步Materialize的视觉样式：移除lever的active类
  $('.item-checkbox').each(function() {
    $(this).next('span.lever').removeClass('active');
  });
});

示例代码（原生JS版本）

如果不用jQuery，写法也类似：

document.getElementById('category-select').addEventListener('change', function() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => {
    // 取消原生选中状态
    checkbox.checked = false;
    // 找到对应的lever元素并移除active类
    const lever = checkbox.nextElementSibling;
    if (lever && lever.classList.contains('lever')) {
      lever.classList.remove('active');
    }
  });
});

额外提示 #

如果之后需要主动勾选复选框，只需要把prop('checked', true)（或checkbox.checked = true）和addClass('active')对应上就行，逻辑是完全一致的。

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