html checkbox

HTML checkbox（复选框）是一种表单元素，允许用户选择多个选项。以下是 checkbox 的常见用法和示例：

基本语法

<input type="checkbox" name="option" value="value1"> 选项文本

基础示例

<form>
  <input type="checkbox" id="apple" name="fruit" value="apple">
  <label for="apple">苹果</label>

  <input type="checkbox" id="banana" name="fruit" value="banana">
  <label for="banana">香蕉</label>

  <input type="checkbox" id="orange" name="fruit" value="orange">
  <label for="orange">橙子</label>
</form>

常用属性

1. checked - 默认选中

<input type="checkbox" checked> 默认选中

2. disabled - 禁用选项

<input type="checkbox" disabled> 禁用的选项

3. name - 分组名称

<input type="checkbox" name="fruits"> 

4. value - 选中时的值

<input type="checkbox" value="option1">

使用 label 标签

<!-- 方法1：使用 for 属性 -->
<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>

<!-- 方法2：包裹方式 -->
<label>
  <input type="checkbox">
  选项2
</label>

样式设置

<style>
  /* 自定义复选框样式 */
  .custom-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  /* 选中状态样式 */
  .custom-checkbox:checked {
    accent-color: #007bff;
  }
</style>

<input type="checkbox" class="custom-checkbox">

表单验证

<form>
  <input type="checkbox" required> 
  <label>我同意服务条款</label>

  <button type="submit">提交</button>
</form>

JavaScript 操作

<input type="checkbox" id="myCheckbox">

<script>
// 获取复选框元素
const checkbox = document.getElementById('myCheckbox');

// 检查是否选中
console.log(checkbox.checked);  // true/false

// 设置选中状态
checkbox.checked = true;

// 添加change事件监听
checkbox.addEventListener('change', function() {
  if(this.checked) {
    console.log('选中了');
  } else {
    console.log('取消选中');
  }
});
</script>

复选框组

<form>
  <fieldset>
    <legend>选择你喜欢的水果：</legend>
  
    <div>
      <input type="checkbox" id="apple" name="fruits[]" value="apple">
      <label for="apple">苹果</label>
    </div>
  
    <div>
      <input type="checkbox" id="banana" name="fruits[]" value="banana">
      <label for="banana">香蕉</label>
    </div>
  
    <div>
      <input type="checkbox" id="orange" name="fruits[]" value="orange">
      <label for="orange">橙子</label>
    </div>
  </fieldset>
</form>

与 Vue.js 结合使用

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="checked"
      @change="handleChange"
    >
    <label>{{ checked ? '已选中' : '未选中' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      console.log('复选框状态：', this.checked)
    }
  }
}
</script>

复选框组（Vue.js）

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="selectedFruits"
      value="apple"
    > 苹果
  
    <input 
      type="checkbox" 
      v-model="selectedFruits"
      value="banana"
    > 香蕉
  
    <input 
      type="checkbox" 
      v-model="selectedFruits"
      value="orange"
    > 橙子
  
    <p>选中的水果: {{ selectedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruits: []
    }
  }
}
</script>

这些示例涵盖了 checkbox 的大多数常见用法。复选框是表单中非常常用的元素，可以用于多选场景、同意条款等多种情况。结合 CSS 可以自定义样式，结合 JavaScript 可以实现更复杂的交互功能。