当unclick复选框时，请返回初始状态

Question

我有：

 <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';
    } 
});

我认为，当我取消选中时，当我只有在给复选框时执行if条件为true时，就会删除" ReadOnly"类。我似乎无法逃脱IF条件，因此可以在点击和Unclick之间切换。我怎样才能做到这一点？

谢谢

Answer 1

以这种方式更改它：

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;
  }
});

Answer 2

尝试一下。

const all = document.getElementsByName("all")[0];
const jsFrameworks = document.getElementsByName("js-frameworks")[0];
this.addEventListener("change", function() {
  if (all.checked) {
    jsFrameworks.parentNode.classList.add("readonly");
  } else if (!all.checked) {
    jsFrameworks.parentNode.classList.remove("readonly");    
  }
});

Answer 3

尝试此

this.addEventListener("click", function() {
    this.parentNode.toggle('readonly');
}