Materialize 1.0版本复选框渲染异常及点击无响应问题求助

我来帮你搞定这个Materialize复选框的问题，你遇到的情况其实是没遵循Materialize组件的特定结构和初始化要求，具体来说：

1. 你需要修正HTML结构 #

Materialize的复选框组件依赖特定的嵌套结构才能渲染样式并保留交互性。正确的写法是用<label>包裹<input>和<span>标签，这样既能让Materialize识别并渲染出复选框样式，又能保证点击文本时触发选中操作：

<p>
  <label>
    <input type="checkbox" id="test9" />
    <span>Red</span>
  </label>
</p>

这里<label>作为容器，内部的<input>和<span>会被Materialize正确关联，点击<span>文本时，会自动触发对应复选框的选中状态。

2. 必须初始化Materialize组件 #

Materialize的大部分组件都需要在页面加载完成后通过JavaScript初始化，复选框也不例外。你需要添加一段初始化代码，让Materialize识别并绑定组件的交互事件：

document.addEventListener('DOMContentLoaded', function() {
  // 自动初始化所有Materialize组件，省心又高效
  M.AutoInit();
});

这段代码会在DOM加载完成后，自动识别页面上的所有Materialize组件（包括复选框），替换成自定义样式并绑定点击等交互逻辑。

完整修正后的代码 #

把这些修改整合到你的代码里，最终版本如下：

<head> 
  <!-- Compiled and minified CSS --> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 
  <!-- Compiled and minified JavaScript --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      M.AutoInit();
    });
  </script>
</head> 
<main> 
  <div class="container " style="padding-left: 2vw;"> 
    <div class="params_container"> 
      <form action="#"> 
        <p>
          <label>
            <input type="checkbox" id="test9" />
            <span>Red</span>
          </label>
        </p> 
      </form> 
    </div><!-- params_container --> 
  </div> 
</main>

为什么之前的写法失效？ #

• 你最初的代码里，<input>和<label>是同级元素，Materialize无法识别这种结构来渲染自定义复选框，所以只显示了文本。
• 换成<span>后，虽然偶然触发了样式渲染，但因为没有用<label>包裹或关联，点击文本时无法触发复选框的选中状态——<span>本身没有和<input>建立交互关联。

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