选择第一个无线电输入时如何选择所有复选框＆amp;选择第二个无线电输入时取消选中所有复选框？ （JavaScript）的

Question

当选择第一个无线电输入时，如何选择所有复选框？选中第二个无线电输入时取消选中所有复选框？ （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()和add a change event listener对每个单选按钮迭代radios列表。每当调用侦听器时，使用checkboxes迭代NodeList.forEach()数组，并更新每个元素的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

Answer 2

你可以使用JQuery来做到这一点。

$('.permission').click(function() {
  $('.custom-selector').prop('checked', $(this).val() == 'select');
});

请参阅下面的代码段

$('.permission').click(function() {
  $('.custom-selector').prop('checked', $(this).val() == 'select');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 3

function handleChange(e) {
    
    if (e.target.value == "select") {
        handleCheckUncheck(true);
    }
    if (e.target.value == "deselect") {
        handleCheckUncheck(false);
    }
}

function handleCheckUncheck(value) {
    document.querySelectorAll("input[type='checkbox']").forEach(function(val) {
        val.checked = value;
    })
}

document.querySelectorAll("input[type='radio']").forEach(function(val) {
    val.addEventListener("change", handleChange);
})

  <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 4

你可以在不使用jQuery的情况下以简单的方式完成它。

添加一个复选框，其状态将为其他人设置。

<label><input type="checkbox" onClick="toggle(this)" /> Select All</label>`

并使用此javascript函数，该功能将使用＆＃39;自定义选择器＆＃39;检查其他复选框。类：

function toggle(source) {
    checkboxes = document.getElementsByName('custom-selector[]');
    for(var i=0, n=checkboxes.length;i<n;i++) {
        checkboxes[i].checked = source.checked;
    }
}

如果有人检查＆＃34;全选＆＃34;复选框，所有其他选项也将被选中。如果取消选择，效果将是相同的。

问候！

Answer 5

我同意@OriDrori的回答，你不需要加载jQuery来完成这么简单的任务。