Jquery onchange 不更新对象值答案

【问题标题】：Jquery onchange does not update the object valuesJquery onchange 不更新对象值
【发布时间】：2020-09-30 01:09:06
【问题描述】：

我们如何在 jquery 的输入上应用 onChage 函数

如何在复选框、日期和名称上应用 onchange 函数并更新对象 initialState 中的 dat

对于复选框，如果选中则其值为 true，如果未选中则为 false

这是我的javascript

    const sectionWork = (event) => {
       event.preventDefault();
       let initialState = {
         check: false,
         Date: "",
         name: ""
       }
       $("#exampleCheck1").on('change', function() {
         if ($(this).is(':checked')) {
           $(this).attr('value', 'true');
         } else {
           $(this).attr('value', 'false');
         }
         initialState.check = $(this).val();
       });
       $('#exampleInputDate').on('change', function() {
               initialState.Date = $(this).val()
       });
        $('#naming').on('change', function() {
             initialState.name = $(this).val()
        });
        console.log(initialState)

    }

    <form onsubmit="sectionWork(event)">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <div class="form-group">
            <label for="exampleInputDate">Date</label>
            <input type="date" id="exampleInputDate" name="date">
        </div>
        <div class="form-group">
            <label for="exampleName">Name</label>
            <input type="text" aria-placeholder="Enter Name"  name = "naming" class="form-control" id="naming" >
        </div>

        <button type="submit" class="btn btn-primary">Releasing</button>
    </form>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您必须使这些事件处理程序在特定事件处理程序之外成为全局范围（这里是 onsubmit 处理程序的sectionWork）

let initialState = {
  check: false,
  Date: "",
  name: ""
}
$("#exampleCheck1").on('change', function() {
  if ($(this).is(':checked')) {
    $(this).attr('value', 'true');
  } else {
    $(this).attr('value', 'false');
  }
  initialState.check = $(this).val();
});
$('#exampleInputDate').on('change', function() {
  initialState.Date = $(this).val()
});
$('#naming').on('change', function() {
  initialState.name = $(this).val()
});

const sectionWork = (event) => {
  event.preventDefault();
  console.log(initialState)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="sectionWork(event)">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <div class="form-group">
    <label for="exampleInputDate">Date</label>
    <input type="date" id="exampleInputDate" name="date">
  </div>
  <div class="form-group">
    <label for="exampleName">Name</label>
    <input type="text" aria-placeholder="Enter Name" name="naming" class="form-control" id="naming">
  </div>

  <button type="submit" class="btn btn-primary">Releasing</button>
</form>

【讨论】：