如何在选择第一个单选输入时选择所有复选框，并在选择第二个单选输入时取消选中所有复选框？ （JavaScript）的

Question

how do I select all checkboxes when the first radio input is selected & uncheck all checkboxes when the second radio input is selected? (Javascript)?

I've looked into previous similar questions on here, but they all seem to be about using checkboxes rather than radio buttons, or there aren't ways to unselect.

  <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

Get a list of HTML nodes by class using document.querySelectorAll() . Iterate the radios list using NodeList.forEach() , and add a change event listener to each radio button. Whenever the listener is called, iterate the checkboxes array with NodeList.forEach() , and update the checked value of each element:

 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

You can do it using JQuery.

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

See below Code Snippet

 $('.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

You can do it in a simple way without using jQuery.

Add a checkbox whose status will be set for others.

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

And use this javascript function that will check other checkboxes with the 'custom-selector' class:

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

If someone checks the "Select All" checkbox, all others will also be selected. If it deselects, the effect will be the same.

Regards!

Answer 5

我同意@OriDrori的回答，您不需要加载jQuery即可完成如此简单的任务。