jQuery click triggers click event handler 3 times

I tried to implement a simple website which have 5 checkboxes.
If user clicks "All" checkbox then all the other checkbox will be checked or unchecked depends on the value of the "All" checkbox.

$(document).ready(function() {
  $("#all").click(function(event) {
    console.log("all");
    $("input[name=vehicle]").each(function() {
      $(this).click();
    });
  });
});

function checkVehicle(event, id) {
  // console.log(event);
  console.log(id);
}

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

  <input type="checkbox" id="all" name="all" />
  <label for="all">All</label>

  <input type="checkbox" id="car" name="vehicle" onclick="checkVehicle(event, 1)" />
  <label>Car</label>
  <input type="checkbox" id="bike" name="vehicle" onclick="checkVehicle(event, 2)" />
  <label>Bike</label>
  <input type="checkbox" id="truck" name="vehicle" onclick="checkVehicle(event, 3)" />
  <label>Truck</label>
  <input type="checkbox" id="tank" name="vehicle" onclick="checkVehicle(event,4)" />
  <label>Tank</label>

The problem is when I click "All" checkbox the checkVehicle for each other checkbox is called 3 times.
I am interested in knowing the reason behind this behaviour rather than how to fix it.

I could solve the problem by using one of the below methods.
First one is instead of triggering click event on jQuery element I could trigger it on DOM element.

$(document).ready(function() {
  $("#all").click(function(event) {
    console.log("all");
    $("input[name=vehicle]").each(function() {
      $(this)[0].click();
    });
  });
});

function checkVehicle(event, id) {
  console.log(event);
  console.log(id);
}

Second one is instead of registering event inline I could register it programmatically.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>
  <script src="index.js"></script>

  <input type="checkbox" id="all" name="all" />
  <label for="all">All</label>

  <input type="checkbox" id="car" name="vehicle" />
  <label>Car</label>
  <input type="checkbox" id="bike" name="vehicle" />
  <label>Bike</label>
  <input type="checkbox" id="truck" name="vehicle" />
  <label>Truck</label>
  <input type="checkbox" id="tank" name="vehicle" />
  <label>Tank</label>

</html>

And here is my index.js

$(document).ready(function() {
  $("#all").click(function(event) {
    console.log("all");
    $("input[name=vehicle]").each(function() {
      $(this).click();
    });
  });

  $("input[name=vehicle]").click(function() {
    console.log("personal");
  });

});

Solution

You have bumped into a bug that was reported in 2019, issue #4493:

When calling $(...).click() on a checkbox input that has an onclick property defined, its callback gets called three times.

Apparently this behavior was introduced on 3.4.0.

The reply from a jQuery team member was:

Inline event handlers are notoriously unreliable, and we don't have much if any test coverage for them as a result. They are on our wontfix list for that reason.

And the wontfix list has:

Inline Event Handlers

In general, inline event handlers are incredibly hard to work with and should not be used. In nearly all cases, issues involving inline event handlers are out of scope. Inline handlers do not behave the same way as event handlers added with the standard DOM addEventListener method.

So there you have it. It is a known bug, and it wont be fixed.