javascript - 取消选中复选框时返回初始状态

我有：

 <label><input type="checkbox" name="all"> text</label>
 <label><input type="checkbox" name="js-frameworks"> text</label>

const all = document.getElementsByName('all')[0];
const jsFrameworks = document.getElementsByName('js-frameworks')[0];

this.addEventListener("change", function() {
    if (all.checked) {
    jsFrameworks.parentNode.className = 'readonly';
    }
});

我以为，当我取消选中该复选框时，“ readonly”类将被删除，因为仅当我勾选if条件为true的复选框时，代码才执行。我似乎无法逃避if条件，因此可以在单击和取消单击之间进行切换。我怎样才能做到这一点？

谢谢

最佳答案

这样更改：

this.addEventListener("change", function() {
  if (all.checked) {
    jsFrameworks.parentNode.className = 'readonly';
  } else {
    jsFrameworks.parentNode.className = '';
  }
});

这样，您可以取消选中该类。

更新：

或者，您可以保存元素之前可能拥有的类：

let classesBefore = jsFrameworks.parentNode.className;
this.addEventListener("change", function() {
  if (all.checked) {
    jsFrameworks.parentNode.className = classesBefore + ' readonly';
  } else {
    jsFrameworks.parentNode.className = classesBefore;
  }
});