Javascript 在物化ECSS中带有复选框的可折叠标头

我需要在标题中创建一个可折叠的with复选框（在ECSS中）

我需要每次单击复选框时，相应的可折叠部分都将展开（因此，如果未选中，该部分将折叠）

或者你可以把它想象成：

每次我展开可折叠的标题时，复选框都会被选中，部分也会展开（当我折叠标题时，复选框将被取消选中，部分也会折叠）

我对Javascript和Materialize非常陌生，我非常确定有更好的实现，因为我的实现带来了一个问题：

当我在复选框标签的边界外单击时，我的实现不会更新复选框，但仍在可折叠头div的边界内。相反，它只是折叠/展开。这是可以理解的，为什么会发生这种情况，但我想不出一个解决办法，并希望在这里得到一些想法

对于我下面的试用代码，我强制它只在第一部分工作：

我的HTML代码是：

<ul class="collapsible">
    <li>
      <div class="collapsible-header">
      <input id = "isChecked" type = "checkbox" checked = "checked" />
      First
      </div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

---

我制作了单选按钮，这样我们可以从多个选项中选择一个选项。 借助于

let eles=document.querySelectorAll（“input[type='radio']）您可以获取所有无线电输入字段

将
单击
事件附加到所有这些单选按钮

for (let i = 0; i < eles.length; i++) {
  eles[i].addEventListener('click', openColl);
}

JS

document.addEventListener('DOMContentLoaded', function() {
    let coll = document.querySelector('.collapsible');
    M.Collapsible.init(coll);
    let inst = M.Collapsible.getInstance(coll);
    let eles = document.querySelectorAll("input[type='radio']");
    openColl = () => {
      for (let i = 0; i < eles.length; i++) {
        if (eles[i].checked) {
          console.log(eles[i].value);
          inst.open(eles[i].value);
        }
      }
    };
    for (let i = 0; i < eles.length; i++) {
      eles[i].addEventListener('click', openColl);
    }
})

document.addEventListener（'DOMContentLoaded'，function（）{
设coll=document.querySelector（'.collapsable'）；
M.可折叠初始值（coll）；
设inst=M.collaxible.getInstance（coll）；
让eles=document.querySelectorAll（“input[type='radio']”）；
openColl=（）=>{
for（设i=0；i

openColl = () => {
  for (let i = 0; i < eles.length; i++) {
    if (eles[i].checked) {
      console.log(eles[i].value);
      inst.open(eles[i].value);
    }
  }
};

<p>
  <label>
    <input type="radio" name="group-1" value="0" />
    <span>First</span>
  </label>
</p>
<p>
  <label>
    <input type="radio" name="group-1" value="1" />
    <span>Second</span>
  </label>
</p>
<p>
  <label>
    <input type="radio" name="group-1" value="2" />
    <span>Third</span>
  </label>
</p>

<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">filter_drama</i>First
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">place</i>Second
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">whatshot</i>Third
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
</ul>

document.addEventListener('DOMContentLoaded', function() {
    let coll = document.querySelector('.collapsible');
    M.Collapsible.init(coll);
    let inst = M.Collapsible.getInstance(coll);
    let eles = document.querySelectorAll("input[type='radio']");
    openColl = () => {
      for (let i = 0; i < eles.length; i++) {
        if (eles[i].checked) {
          console.log(eles[i].value);
          inst.open(eles[i].value);
        }
      }
    };
    for (let i = 0; i < eles.length; i++) {
      eles[i].addEventListener('click', openColl);
    }
})