Проблема динамического изменения значения флажка с использованием JavaScript

Question

У меня есть флажок на форме, которая отлично работает. Когда форма нажата, я пытаюсь изменить значение на 1, когда не нажата, значение должно быть равно нулю. Я заполняю поле динамически, используя JavaScript. Проблема в том, что при входе в консоль я получаю пустое значение ..

Поле флажка

function checkMark() {
  var checkBox = document.getElementById("spouse");

  if (checkBox.checked == true){
    checkBox.value = '1';
  } else {
    checkBox.value = 'O';
  }
}

var spouse = $('#spouse').val();
console.log(spouse);

    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="spouse" value="" class="spouse" onclick="checkMark()">

Answer 1

Причина вашей проблемы в том, что вы регистрируете именно тогда, когда страница изначально загружена. Вы должны записывать результат каждый раз, когда вы изменяете значение checkbox.

Кроме того, вы можете использовать оператор ternary для упрощения решения.

function checkMark() {
     var checkBox = document.getElementById("spouse");
     checkBox.value = checkBox.checked ? '1' : '0';
     log();
}

function log(){
     var spouse = $('#spouse').val();
     console.log(spouse);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="spouse" value="" class="spouse" onclick="checkMark()">

Answer 2

Попробуйте вызвать вашу функцию через onChange вместо onClick