Почему onclick работает по разному?

Question

[aaltw]

Переписывал все с 4 на 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"

Далее выполняется код:
var game_checked = $("#game_1").is(":checked");
где я получаю значение чекбокса и использую его дальше.

Почему jquery возвращает разное?

Допустим, чекбокс НЕ нажат. Если я нажму на него, то:
При 1 - game_checked будет true. Т.е. он сначала нажмется, а только после jquery заберет его значение.
При 2 - game_checked будет false. Т.к. jquery в этот раз заберет значение на момент нажатия, а только потом чекбокс станет чекнутым.

Comments

[Артем]

Может стоит использовать change событие?

[Fedor Vlasenko]

id="game_1"
ид должны быть уникальными
onclick="recalc(this )"

function recalc(el ){console.log(el.checked);}

[aaltw]

Артем, тоже самое

Fedor Vlasenko, так id уникальное, это 2 взаимозаменяемых варианта. Или я не понял тогда почему оно не уникальное. Через this работает, да, я пока на него и поменял, просто пытаюсь понять почему jquery стал себя по другому вести.

[aaltw]

Просто значение этого чекбокса нужно не прям в функции, которую он вызывает при нажатии. Т.е. вызывается recalc(), а потом она вызывает еще одну функцию и уже та проверяет по id значение чекбокса.

И вот почему-то в первой реализации это значение меняется на момент выполнения второй функции, а во второй реализации - нет. Как на это могла повлиять версия bootstrap-а не совсем понимаю. Возможно, это связано с тем, что раньше jquery подгружал сам bootstrap, а теперь он грузится отдельно.