javascript - 在做某事之前如何确认所有复选框都已选中？

Question

我的目标是，如果所有复选框都被选中，则该人可以进一步，否则它将进入借口页面。

我在 jQuery 中找到了这个:

$("input[type='checkbox'].itemCheck").change(function(){
    var a = $("input[type='checkbox'].itemCheck");
    if(a.length == a.filter(":checked").length){
        console.log("Je vais sur la formulaire");

    }
});

我尝试了它并且它有效，但我需要在 vanilla js 中使用它，所以我尝试转换它，但我只是不知道如何完成此操作。

我尝试了其他逻辑来使其工作，但我不知道如何实现。

<input type="checkbox" name="verif" class="checkbox itemCheck">

<input type="checkbox"  name="age" class="checkbox itemCheck">

<input type="checkbox"  name="employed" class="checkbox itemCheck">

Answer 1

该 jQuery 代码的普通 JavaScript 版本将是:(添加注释，以便您可以了解发生了什么)

// gets all the inputs on the page with type = "checkbox"
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// loops through each checkbox
for (var i = 0; i < checkboxes.length; i++) {
  // add an change event listener to each checkbox
  checkboxes[i].addEventListener('change', function() {
    // gets the checkboxes that are ticked (or "checked")
    var checkboxes_ticked = document.querySelectorAll('input[type="checkbox"]:checked');
    // check if the length of ticked checkboxes matches with the total checkboxes on the page
    if (checkboxes_ticked.length === checkboxes.length) {
      // all checkboxes where ticked! display your message
      console.log("Je vais sur la formulaire");
    }
  });
}

祝你好运。