报告问题编辑此页面

表单复选框

为了跨浏览器的一致性，<b-form-checkbox-group> 和 <b-form-checkbox> 使用 Bootstrap 的自定义复选框输入来替换浏览器的默认复选框输入。它建立在语义和可访问的标记之上，因此它是默认复选框输入的可靠替代品。

示例 1：单个复选框

<template>
  <div>
    <b-form-checkbox
      id="checkbox-1"
      v-model="status"
      name="checkbox-1"
      value="accepted"
      unchecked-value="not_accepted"
    >
      I accept the terms and use
    </b-form-checkbox>

    <div>State: <strong>{{ status }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: 'not_accepted'
      }
    }
  }
</script>

<!-- b-form-checkbox.vue -->

示例 2：多选复选框

<template>
  <div>
    <b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Using sub-components:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="flavour-2"
      >
        <b-form-checkbox value="orange">Orange</b-form-checkbox>
        <b-form-checkbox value="apple">Apple</b-form-checkbox>
        <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
        <b-form-checkbox value="grape">Grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-multiple.vue -->

随意混合匹配 options 属性和 <b-form-checkbox> 中的 <b-form-checkbox-group>。手动放置的 <b-form-checkbox> 输入将显示在 options 属性生成的任何复选框输入下方。要让它们显示在 options 生成的输入上方，请将它们放在名为 first 的命名插槽中。

复选框组选项数组

options 可以是字符串或对象的数组。可用字段

  • value 将在 v-model 上设置的选定值
  • disabled 禁用项目以进行选择
  • text 显示文本，或 html 显示基本内联 html

value 可以是字符串、数字或简单对象。避免在值中使用复杂类型。

如果同时提供了 html 和 text，html 将优先。仅在 html 字段中支持基本/原生 HTML（组件不起作用）。请注意，并非所有浏览器都将在 <select> 的 <option> 元素内呈现内联 html（即 <i>、<strong> 等）。

小心将用户提供的内容放置在 html 字段中，因为它可能会使你容易受到 XSS 攻击 的攻击，如果你没有首先 清除 用户提供的字符串。 

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

如果数组项为字符串，它将用于生成的 value 和 text 字段。

你可以在数组中混合使用字符串和 对象。

在内部，BootstrapVue 将把上述数组转换为以下数组（对象数组）格式

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

作为对象数组的选项

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

如果 value 缺失，则 text 将同时用作 value 和 text 字段。如果你使用 html 属性，你必须提供 value 属性。

在内部，BootstrapVue 将把上述数组转换为以下数组（对象数组）格式

const options = [
  { text: 'Item 1', value: 'first', disabled: false },
  { text: 'Item 2', value: 'second', disabled: false },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4', value: 'Item 4', disabled: false },
  { text: 'Item 5', value: 'E', disabled: false }
]

更改选项字段名称

如果你想自定义字段属性名称（例如使用 name 字段显示 text），你可以轻松地通过将 text-field、html-field、value-field 和 disabled-field 道具设置为包含你想要使用的属性名称的字符串来更改它们

<template>
  <div>
    <b-form-checkbox-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-checkbox-group>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [],
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-group-options-fields.vue -->

内联和堆叠复选框

<b-form-checkbox-group> 组件默认呈现内联复选框，而 <b-form-checkbox> 呈现块级（堆叠）复选框。

在 <b-form-checkbox-group> 上设置 prop stacked 以将每个表单控件彼此叠放，或者如果在 <b-form-checkbox-group> 中不使用单个复选框，则在 <b-form-checkbox> 上设置 inline prop。

<template>
  <div>
    <b-form-group
      label="Form-checkbox-group inline checkboxes (default)"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1a"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Form-checkbox-group stacked checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-2a"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Individual stacked checkboxes (default)"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        :aria-describedby="ariaDescribedby"
        name="flavour-3a"
      >
        {{ option.text }}
      </b-form-checkbox>
    </b-form-group>

    <b-form-group
      label="Individual inline checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        :aria-describedby="ariaDescribedby"
        name="flavour-4a"
        inline
      >
        {{ option.text }}
      </b-form-checkbox>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-stacked.vue -->

控件大小

使用 size prop 来控制复选框的大小。默认大小为中等。支持的大小值为 sm（小）和 lg（大）。

<div>
  <b-form-checkbox size="sm">Small</b-form-checkbox>
  <b-form-checkbox>Default</b-form-checkbox>
  <b-form-checkbox size="lg">Large</b-form-checkbox>
</div>

<!-- form-checkbox-sizes.vue -->

大小可以设置在单个 <b-form-checkbox> 组件上，或从 <b-form-checkbox-group> 的大小设置中继承。

注意：Bootstrap v4.x 本身不支持自定义复选框控件的大小。但是，BootstrapVue 包含自定义的 SCSS/CSS，为自定义复选框的大小提供支持。

复选框值和 v-model

默认情况下，选中时 <b-form-checkbox> 值为 true，未选中时为 false。您可以通过分别指定 value 和 unchecked-value 属性来自定义选中和未选中值。

v-model 绑定到 checked 属性。当您有多个绑定到单个数据状态变量的复选框时，必须为 v-model 提供数组引用 ([])。请勿直接使用 checked 属性。

请注意，当 v-model 绑定到多个复选框（即数组引用）时，unchecked-value 未使用。只有已选中复选框的值才会返回到 v-model 绑定的数组中。您应为每个复选框的 value 属性提供唯一值（当绑定到数组时，true 的默认值将不起作用）

要预先选中任何单选按钮，请将 v-model 设置为您希望预先选中的复选框的值。

在 <b-form-checkbox-group> 中放置单个 <b-form-checkbox> 组件时，大多数属性和 v-model 从 <b-form-checkbox-group> 继承。

注意：unchecked-value 属性不影响本机 <input> 的 value 属性，因为浏览器不会在表单提交中包含未选中的框。若要确保在提交本机 <form> 时提交两个值之一（例如 'yes' 或 'no'），请改用单选按钮输入。这是 Vue 对本机复选框输入的限制。

多个复选框和可访问性

当将多个复选框绑定在一起时，您必须为组中的所有 <b-form-checkbox> 单独或通过 <b-form-checkbox-group> 的 name 属性将 name 属性设置为相同的值。这将告知辅助技术用户复选框是相关的，并启用本机浏览器键盘导航。

每当使用多个复选框时，建议将复选框放置在 <b-form-group> 组件中，以将标签与整个复选框组相关联。请参见上面的示例。

按钮样式复选框

您可以选择将复选框呈现为按钮，单独呈现或分组呈现。

当按钮样式复选框处于选中状态时，将自动将类 .active 应用于标签。

单个复选框按钮样式

可以通过将 button 属性设置为 true，来使用按钮外观呈现单个复选框。

通过将 button-variant 属性设置为标准 Bootstrap 按钮变体之一（有关支持的变体，请参阅 <b-button>），来更改按钮变体。默认变体为 secondary。

<template>
  <div>
    <b-form-checkbox v-model="checked1" name="check-button" button>
      Button Checkbox <b>(Checked: {{ checked1 }})</b>
    </b-form-checkbox>
    <b-form-checkbox v-model="checked2" name="check-button" button button-variant="info">
      Button Checkbox <b>(Checked: {{ checked2 }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked1: false,
        checked2: false
      }
    }
  }
</script>

<!-- b-form-checkbox-button.vue -->

inline 属性对单个按钮样式复选框无效。

分组按钮样式复选框

通过在 <b-form-checkbox-group> 上设置 buttons 属性，来使用按钮组的外观呈现复选框组。通过将 button-variant 属性设置为标准 Bootstrap 按钮变体之一（有关支持的变体，请参阅 <b-button>），来更改按钮变体。默认 button-variant 为 secondary。

<template>
  <div>
    <b-form-group
      label="Button-group style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="buttons-1"
        buttons
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Button-group style checkboxes with variant primary and large buttons"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        buttons
        button-variant="primary"
        size="lg"
        name="buttons-2"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Stacked (vertical) button-group style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        stacked
        buttons
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-button-group.vue -->

开关样式复选框

开关样式在 <b-form-checkbox> 和 <b-form-checkbox-group> 组件上受支持。

注意：如果复选框处于 按钮模式，则开关模式将无效。

单个复选框开关样式

可以通过将 switch 属性设置为 true，来使用开关外观呈现单个复选框。

<template>
  <div>
    <b-form-checkbox v-model="checked" name="check-button" switch>
      Switch Checkbox <b>(Checked: {{ checked }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    }
  }
</script>

<!-- b-form-checkbox-switch.vue -->

分组开关样式复选框

通过在 <b-form-checkbox-group> 上设置 switches 属性，以开关的外观呈现复选框组。

<template>
  <div>
    <b-form-group
      label="Inline switch style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        switches
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Stacked (vertical) switch style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        switches
        stacked
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Red', value: 'red' },
          { text: 'Green', value: 'green' },
          { text: 'Yellow (disabled)', value: 'yellow', disabled: true },
          { text: 'Blue', value: 'blue' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkboxes-switch-group.vue -->

开关大小

使用 size 属性控制开关的大小。默认大小为中等。支持的大小值为 sm（小）和 lg（大）。

<div>
  <b-form-checkbox switch size="sm">Small</b-form-checkbox>
  <b-form-checkbox switch>Default</b-form-checkbox>
  <b-form-checkbox switch size="lg">Large</b-form-checkbox>
</div>

<!-- form-checkbox-switch-sizes.vue -->

大小可以设置在单个 <b-form-checkbox> 组件上，或从 <b-form-checkbox-group> 的大小设置中继承。

注意：Bootstrap v4.x 本身不支持自定义开关控件的大小。但是，BootstrapVue 包含自定义 SCSS/CSS，增加了对自定义开关大小的支持。

非自定义检查输入（普通）

可以通过设置 plain 属性，让 <b-form-checkbox-group> 或 <b-form-checkbox> 呈现浏览器本机复选框输入。

<template>
  <div>
    <b-form-group label="Plain inline checkboxes" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        plain
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Plain stacked checkboxes" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        plain
        stacked
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-plain.vue -->

注意：当设置 button 或 buttons 时，plain 属性不起作用。

上下文状态

Bootstrap 包含针对大多数表单控件的 valid 和 invalid 状态的验证样式。

一般来说，你会希望针对特定类型的反馈使用特定状态

  • false（表示无效状态）非常适合在存在阻止或必填字段时使用。用户必须正确填写此字段才能提交表单。
  • true（表示有效状态）非常适合在整个表单中进行逐字段验证，并希望引导用户完成其余字段的情况。
  • null 不显示验证状态（既不是有效也不是无效）

要在 <b-form-checkbox> 上应用其中一个上下文状态图标，请将 state 属性设置为 false（无效）、true（有效）或 null（无验证状态）。

注意：在按钮模式下不支持上下文状态。

上下文状态和验证示例

<template>
  <div>
    <b-form-checkbox-group
      v-model="value"
      :options="options"
      :state="state"
      name="checkbox-validation"
    >
      <b-form-invalid-feedback :state="state">Please select two</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">Thank you</b-form-valid-feedback>
    </b-form-checkbox-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [
          { text: 'First Check', value: 'first' },
          { text: 'Second Check', value: 'second' },
          { text: 'Third Check', value: 'third' }
        ]
      }
    },
    computed: {
      state() {
        return this.value.length === 2
      }
    }
  }
</script>

<!-- form-checkbox-validation.vue -->

必需约束

当使用单独的 <b-form-checkbox> 组件（不在 <b-form-checkbox-group> 中）时，并且希望复选框在表单中为 required，则必须在每个 <b-form-checkbox> 上提供一个 name，才能使必需约束生效。所有绑定到相同 v-model 的 <b-form-checkbox> 组件必须具有相同的 name。

为了让辅助技术（例如屏幕阅读器和仅键盘用户）知道哪些复选框属于同一表单变量，需要 name（该名称还自动启用本机浏览器键盘导航），因此仅当设置 name 时 required 才有效。如果未在组中提供 name，<b-form-checkbox-group> 将自动生成一个唯一的输入名称。

自动对焦

当在 <b-form-checkbox> 上设置 autofocus 属性时，当输入插入（即挂载）到文档中或在 Vue <keep-alive> 组件内重新激活时，该输入将自动对焦。请注意，此属性不会在输入上设置 autofocus 属性，也无法判断输入何时变为可见。

不确定（三态）支持

通常，复选框输入只能有两种状态：选中或未选中。它们可以具有任何值，但它们要么提交该值（选中），要么不提交该值（未选中），并提交表单（尽管 BootstrapVue 允许在单个复选框上为未选中状态设置一个值）

从视觉上看，复选框实际上可以处于三种状态：选中、未选中或不确定。

不确定状态仅为视觉效果。复选框仍以值的形式选中或未选中。这意味着视觉不确定状态掩盖了复选框的真实值，因此在你的 UI 中更有意义！

<b-form-checkbox> 支持通过 indeterminate 属性设置此视觉不确定状态（默认为 false）。单击复选框将清除其不确定状态。可以通过使用 .sync 修饰符将 indeterminate 属性与复选框的状态进行 v-binding，从而将 indeterminate 属性同步到复选框的状态。

注意：不确定样式在按钮或开关模式下不受支持，在 <b-form-checkbox-group>（多个复选框）中也不受支持。

单个不确定复选框

<template>
  <div>
    <b-form-checkbox v-model="checked" :indeterminate.sync="indeterminate">
      Click me to see what happens
    </b-form-checkbox>

    <div class="mt-3">
      Checked: <strong>{{ checked }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>

    <b-button @click="toggleIndeterminate">Toggle Indeterminate State</b-button>
  </div>
</template>

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

<!-- b-form-checkbox-indeterminate.vue -->

不确定复选框用例示例

<template>
  <div>
    <b-form-group>
      <template #label>
        <b>Choose your flavours:</b><br>
        <b-form-checkbox
          v-model="allSelected"
          :indeterminate="indeterminate"
          aria-describedby="flavours"
          aria-controls="flavours"
          @change="toggleAll"
        >
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        </b-form-checkbox>
      </template>

      <template v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          id="flavors"
          v-model="selected"
          :options="flavours"
          :aria-describedby="ariaDescribedby"
          name="flavors"
          class="ml-4"
          aria-label="Individual flavours"
          stacked
        ></b-form-checkbox-group>
      </template>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong><br>
      All Selected: <strong>{{ allSelected }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        flavours: ['Orange', 'Grape', 'Apple', 'Lime', 'Very Berry'],
        selected: [],
        allSelected: false,
        indeterminate: false
      }
    },
    methods: {
      toggleAll(checked) {
        this.selected = checked ? this.flavours.slice() : []
      }
    },
    watch: {
      selected(newValue, oldValue) {
        // Handle changes in individual flavour checkboxes
        if (newValue.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newValue.length === this.flavours.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
  }
</script>

<!-- b-form-checkbox-indeterminate-multiple.vue -->

注意：不确定状态在 button 模式或多个复选框模式下不受支持。还要注意，普通复选框（即带有道具 plain）在 Windows/Linux/Mac/Android 上也支持不确定状态，但在 iOS 上不支持。

不确定状态和辅助功能

并非所有屏幕阅读器都会向屏幕阅读器用户传达不确定状态。因此，建议向用户提供某种形式的文本反馈（可能通过 .sr-only 类），如果您的应用程序中的不确定状态具有特殊的上下文含义。

组件参考

<b-form-checkbox-group>

查看源代码

组件别名

<b-form-checkbox-group> 还可以通过以下别名使用

  • <b-checkbox-group>
  • <b-check-group>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可 全局配置。

属性
（单击按升序排列）
类型
（单击按升序排列）
默认值
说明
aria-invalid
Boolean 或 Stringfalse在包装元素上设置“aria-invalid”属性值。未提供时，“state”道具将控制该属性
自动对焦
布尔值false设置为 `true` 时，尝试在装载控件时自动对焦，或在保持活动状态时重新激活。不会在控件上设置 `autofocus` 属性
按钮变体
字符串指定应用于按钮样式复选框的 Bootstrap 上下文颜色主题变体
按钮
布尔值false设置后，使用按钮样式渲染此组中的复选框
已选中
v-model 		数组[]组中已选中复选框的当前值。当有多个复选框时，必须是数组
已禁用
布尔值false设置为 `true` 时，禁用组件的功能并将其置于禁用状态
禁用字段
字符串'disabled'`options` 数组中应用于禁用状态的字段名称
表单
字符串表单控件所属的表单 ID。在控件上设置 `form` 属性
html 字段
谨慎使用 		字符串'html'`options` 数组中应用于 html 标签的字段名称，而不是文本字段
id
字符串用于设置已渲染内容的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
名称
字符串设置表单控件上 `name` 属性的值
选项
Array 或 Object[]要在组件中渲染的项目数组
普通
布尔值false以普通模式渲染表单控件，而不是自定义样式模式
必需
布尔值false向表单控件添加 `required` 属性
大小
字符串设置组件外观的大小。'sm'、'md'（默认）或 'lg'
堆叠
布尔值false设置后，以堆叠模式渲染复选框组
状态
布尔值null控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，`null` 表示没有验证状态
切换
布尔值false设置后，使用切换样式渲染组中的复选框
文本字段
字符串'text'`options` 数组中应用于文本标签的字段名称
已验证
布尔值false设置后，向组包装器添加 Bootstrap 类 'was-validated'
值字段
字符串'value'`options` 数组中应用于值的字段名称

注意：支持 HTML 字符串的属性 (*-html) 在传递原始用户提供的值时容易受到 跨站脚本 (XSS) 攻击 。您必须首先正确 清除 用户输入！

v-model

属性
事件
已选中input

插槽

名称
说明
default 要放置在表单复选框组中的内容（表单复选框）
first 放置 b-form-checks 的插槽，以便它们出现在由 options 属性生成的复选框之前

事件

事件
参数
说明
change
  1. checked - 复选框的值。值将是一个数组
当选定的值因用户交互而更改时发出
input
  1. checked - 复选框的值。值将是一个数组
当选中的值更改时发出

<b-form-checkbox>

查看源代码

组件别名

<b-form-checkbox> 还可以通过以下别名使用

  • <b-checkbox>
  • <b-check>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可 全局配置。

属性
（单击按升序排列）
类型
（单击按升序排列）
默认值
说明
aria-label
字符串设置渲染元素上 `aria-label` 属性的值
aria-labelledby
字符串为该组件提供标签的元素的 ID。用作 `aria-labelledby` 属性的值
自动对焦
布尔值false设置为 `true` 时，尝试在装载控件时自动对焦，或在保持活动状态时重新激活。不会在控件上设置 `autofocus` 属性
button
布尔值false设置后，以按钮的外观呈现复选框
按钮变体
字符串在“按钮”模式下应用 Bootstrap 的一种主题颜色
已选中
v-model 		任何null复选框的当前值。当有多个复选框绑定到同一个 v-model 时，必须是一个数组
已禁用
布尔值false设置为 `true` 时，禁用组件的功能并将其置于禁用状态
表单
字符串表单控件所属的表单 ID。在控件上设置 `form` 属性
id
字符串用于设置已渲染内容的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
indeterminate
布尔值false以不确定的状态呈现复选框。可通过 .sync 修饰符进行同步
inline
布尔值false设置后，将复选框渲染为内联元素，而不是 100% 宽度块
名称
字符串设置表单控件上 `name` 属性的值
普通
布尔值false以普通模式渲染表单控件，而不是自定义样式模式
必需
布尔值false向表单控件添加 `required` 属性
大小
字符串设置组件外观的大小。'sm'、'md'（默认）或 'lg'
状态
布尔值null控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，`null` 表示没有验证状态
switch
布尔值false设置后，将复选框渲染为开关的外观
unchecked-value
任何false此复选框未选中时返回的值。请注意，当多个复选框绑定到同一个 v-model 数组时不适用
value
任何true此复选框选中时返回的值

v-model

属性
事件
已选中input

插槽

名称
说明
default 要放置在表单复选框中的内容

事件

事件
参数
说明
change
  1. checked - 复选框的值。当绑定到多个复选框时，值将为一个数组
当选定的值因用户交互而更改时发出
input
  1. checked - 复选框的值。当绑定到多个复选框时，值将为一个数组
在所选值发生更改时发出

导入单个组件

您可以通过以下命名导出将单个组件导入到您的项目中

组件
命名导出
导入路径
<b-form-checkbox-group>BFormCheckboxGroupbootstrap-vue
<b-form-checkbox>BFormCheckboxbootstrap-vue

示例

import { BFormCheckboxGroup } from 'bootstrap-vue'
Vue.component('b-form-checkbox-group', BFormCheckboxGroup)

作为 Vue.js 插件导入

此插件包含上述所有列出的单个组件。插件还包括任何组件别名。

命名导出
导入路径
FormCheckboxPluginbootstrap-vue

示例

import { FormCheckboxPlugin } from 'bootstrap-vue'
Vue.use(FormCheckboxPlugin)