如何使复选框在选中或未选中时显示正确的值

<input type="checkbox" id="myCheckbox" onchange="updateValue()">选项1

<script>
function updateValue() {
  var checkbox = document.getElementById("myCheckbox");
  var valueDisplay = document.getElementById("valueDisplay");
  
  if (checkbox.checked) {
    valueDisplay.innerHTML = "选中";
  } else {
    valueDisplay.innerHTML = "未选中";
  }
}
</script>

<div id="valueDisplay">未选中</div>

<div id="app">
  <input type="checkbox" v-model="isChecked">选项1
  <div>{{ valueDisplay }}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    isChecked: false
  },
  computed: {
    valueDisplay: function() {
      return this.isChecked ? "选中" : "未选中";
    }
  }
})
</script>

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        checkbox_value = request.form.get('myCheckbox')
        value_display = "选中" if checkbox_value else "未选中"
        return render_template('index.html', value_display=value_display)
    else:
        return render_template('index.html')

if __name__ == '__main__':
    app.run()

<!-- index.html -->
<form method="POST">
  <input type="checkbox" name="myCheckbox">选项1
  <input type="submit" value="提交">
</form>

<div>{{ value_display }}</div>