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

尝试通过onChange而不是onClick调用函数

Answer 2

出现此问题的原因是，您只是在初次加载页面时记录日志。每次更改checkbox值时，都必须 log 记录结果。

此外，您可以使用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()">

使用JavaScript动态更改复选框的值时出现问题

2 个答案: