写一个checkbox案例

好的，以下是一个简单的checkbox案例：

HTML代码：

<label>
  <input type="checkbox" id="myCheckbox">
  我同意条款和条件
</label>

JavaScript代码：

const checkbox = document.getElementById("myCheckbox");

checkbox.addEventListener("change", function() {
  if (this.checked) {
    console.log("用户已同意条款和条件");
  } else {
    console.log("用户未同意条款和条件");
  }
});

这个案例创建了一个带有文本标签的checkbox，当用户点击checkbox时，JavaScript代码会检测checkbox的状态并输出相应的信息。

相关问题

checkBox1_CheckedChanged案例

在Windows Forms或WPF中，`checkBox1_CheckedChanged`是一个常用的事件，当用户改变了名为`checkBox1`的复选框的状态（如从未选中变为选中或相反）时，它会被触发。下面是一个简单的例子：

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
    // 检查checkBox1是否被选中
    bool isChecked = checkBox1.Checked;

    if (isChecked)
    {
        Console.WriteLine("checkBox1已被选中，你可以在这里添加显示提示信息、执行相关操作等代码...");
        // 示例操作：如果复选框被选中，打开一个新的窗口或显示一个消息
        MessageBox.Show("你选择了此选项");
    }
    else
    {
        Console.WriteLine("checkBox1未被选中");
        // 如果复选框未选中，执行其他操作...
        MessageBox.Show("请选择此选项以继续");
    }
}

在这个例子中，我们监听了`checkBox1_CheckedChanged`事件，根据复选框的当前状态（`Checked`属性），我们可以执行相应的操作。比如显示提示信息、更新后台数据或者执行进一步的功能。

用vue3写一个todo案例

好的，下面是一个用 Vue3 写的基本的 TodoList 案例：

<template>
  <div class="todo">
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" placeholder="Add a new todo">
      <button>Add</button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ completed: todo.done }">{{ todo.text }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      todos: [],
      newTodo: '',
    });

    function addTodo() {
      if (state.newTodo.trim() === '') return;
      state.todos.push({
        text: state.newTodo,
        done: false,
      });
      state.newTodo = '';
    }

    function deleteTodo(index) {
      state.todos.splice(index, 1);
    }

    return {
      ...state,
      addTodo,
      deleteTodo,
    };
  },
};
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

这个 TodoList 组件有一个输入框和一个添加按钮，用于添加新的待办事项。已经添加的待办事项会显示在一个列表中，每个待办事项都有一个复选框和一个删除按钮。用户可以勾选复选框来标记已完成的任务，也可以点击删除按钮来删除任务。