Как я могу получить доступ к своему родительскому элементу li, используя javascript?

Question

Я новичок в JavaScript, и я не могу понять, как я могу получить индекс li, чей флажок установлен, и добавить / удалить класс CSS, вырезанный для этого конкретного li. Я попробовал родительские методы, но это не сработало, может быть, я делал это неправильно!

Например, я намеренно добавил класс CSS cut в последний li, но я хочу добавить этот класс в li когда флажок установлен.

function myfunction() {

}

.cut {
  text-decoration: line-through;
  opacity: 0.4;
}

#mylist {
  list-style: none;
}

<div class="container">
  <ul id="mylist">
    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction()">
      <label class="mytodo">make tea</label>
    </li>
    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction()">
      <label class="mytodo">notes making</label>
    </li>
    <li class="mycheck cut">
      <input type="checkbox" class="status" checked  onclick="myfunction()">
      <label class="mytodo">set clothes</label>
    </li>
  </ul>
</div>

Answer 1

В функцию можно передать ключевое слово this, чтобы можно было определить ближайший элемент li из отмеченного флажка:

function myfunction(el){
  if(el.checked){
    el.closest('li').classList.add('cut');
  }
  else{
    el.closest('li').classList.remove('cut');
  }
}

.cut{
  text-decoration: line-through;
  opacity: 0.4;
}

#mylist{list-style: none;}

<div class="container">
  <ul id="mylist">

    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction(this)" >
      <label class="mytodo">make tea</label>
    </li>

    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction(this)">
      <label class="mytodo">notes making</label>
    </li>

    <li class="mycheck">
      <input type="checkbox" class="status" onclick="myfunction(this)">
      <label class="mytodo">set clothes</label>
    </li>

  </ul>

</div>

Присоединение события с использованием JavaScript:

var checkboxes = document.querySelectorAll('.mycheck .status');
checkboxes.forEach(function(chk){
  chk.addEventListener('click', function(){
    myfunction(this);
  });
})
function myfunction(el){
  if(el.checked){
    el.closest('li').classList.add('cut');
  }
  else{
    el.closest('li').classList.remove('cut');
  }
}

.cut{
  text-decoration: line-through;
  opacity: 0.4;
}

#mylist{list-style: none;}

<div class="container">
  <ul id="mylist">

    <li class="mycheck">
      <input type="checkbox" class="status" >
      <label class="mytodo">make tea</label>
    </li>

    <li class="mycheck">
      <input type="checkbox" class="status">
      <label class="mytodo">notes making</label>
    </li>

    <li class="mycheck">
      <input type="checkbox" class="status">
      <label class="mytodo">set clothes</label>
    </li>

  </ul>

</div>