Why does onclick work differently?

Question

JavaScript

Rewrote everything from 4 to 5 Bootstrap:

# 1. Bootstrap 4
.custom-control.custom-checkbox.float-left
  input.custom-control-input.result-game.float-left onclick="recalc( )" type="checkbox" autocomplete="off" checked=data['IsGameCheckboxEnabled'] id="game_1"
  label.custom-control-label for="game_1"

# 2. Bootstap 5
.form-check.float-start
  input.form-check-input.result-game.float-start onclick="recalc( )" type="checkbox" autocomplete="off" checked=data['IsGameCheckboxEnabled'] id="game_1"

Next, the code is executed: where I get the value of the checkbox and use it further. Why does jquery return different? Let's say the checkbox is NOT clicked. If I click on it, then: If 1 - game_checked will be true. Those. it will be clicked first and only after jquery will pick up its value. With 2 - game_checked will be false. Because jquery this time will take the value at the moment of clicking, and only then the checkbox will become checked.
var game_checked = $("#game_1").is(":checked");