javascript - 如何在选择第一个 radio 输入时选择所有复选框并在选择第二个 radio 输入时取消选中所有复选框？ (Javascript)

Question

如何在选择第一个 radio 输入时选择所有复选框并在选择第二个 radio 输入时取消选中所有复选框？ (Javascript)？

我在这里研究过以前的类似问题，但它们似乎都是关于使用复选框而不是单选按钮，或者没有办法取消选择。

  <input type="radio" class="permission" name="permission" value="select" /> Select All<br>
  <input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>

   <input type="checkbox" class="custom-selector" /> Checkbox  1
   <input type="checkbox" class="custom-selector" /> Checkbox  2
   <input type="checkbox" class="custom-selector" /> Checkbox  3

Answer 1

使用 document.querySelectorAll() 按类获取 HTML 节点列表。使用 NodeList.forEach() 迭代 radios 列表，和 add a change event listener到每个单选按钮。每当调用监听器时，都会使用 NodeList.forEach() 迭代 checkboxes 数组，并更新每个元素的 checked 值:

var checkboxes = document.querySelectorAll('.custom-selector');
var radios = document.querySelectorAll('.permission');

radios.forEach(function(el) {
  el.addEventListener('change', function(e) {
    var checked = el.value === 'select';
    
    checkboxes.forEach(function(el) {
      el.checked = checked;
    });
  });
});

<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>

<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3