如何检查输入是否被选中

在页面交互中，我们常常需要检查文本框、复选框、单选框等输入框中是否已经被选中。下面给出几种实现方式。

方法一：使用原生JavaScript

使用原生JavaScript，我们可以通过调用DOM元素的checked属性来判断是否选中。

以下是一个实例：

let checkbox = document.getElementById("checkbox");
if (checkbox.checked) {
    // 选中了
} else {
    // 没选中
}

以上代码中，document.getElementById("checkbox") 是获取到id为"checkbox"的复选框对象，通过访问checked属性，返回true或false，即表示是否被选中。

方法二：使用jQuery

如果你使用jQuery，相比原生JavaScript，可以更加简洁直观。使用jQuery的prop()方法就可以轻松实现。

以下是一个实例：

let checkbox = $("#checkbox");
if (checkbox.prop("checked")) {
    // 选中了
} else {
    // 没选中
}

以上代码中，使用$()获取到id为"checkbox"的复选框对象，调用prop()方法，返回true或false，表示是否被选中。

方法三：使用Vue.js

如果你使用Vue.js，只需要通过绑定数据，就可以轻松实现文本框、复选框、单选框等元素是否选中的判断。

以下是一个实例：

<template>
  <div>
    <input type="checkbox" v-model="checked">
    <button @click="toggleChecked">Toggle checked</button>
    <p v-if="checked">Checkbox is checked</p>
    <p v-else>Checkbox is not checked</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    },
    methods: {
      toggleChecked() {
        this.checked = !this.checked
      }
    }
  }
</script>

通过绑定v-model指令，可以实现vue中的数据双向绑定。<p>元素中的v-if / v-else指令会根据checked变量的值来展示不同的文本。toggleChecked()方法在按钮被点击时切换checked变量的值。

以上是三种实现方式，可以根据自己的实际情况进行选择。