复选框

Form Components 表单组件
Toggle 开关
Form Components 表单组件
Option Group 选项组
Form Components 表单组件
Radio 单选框
Form Components 表单组件
Button Toggle 按钮开关

QCheckbox 组件是收集用户输入的一个基本元素。您可以使用此选项为用户提供切换选项的方式。

TIP

关于创建一组复选框组的其他可能性，请参阅 QOptionGroup。

QCheckbox API

QCheckbox API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单，则非常有用
toggle-order
: String
说明
定义两种状态的切换顺序（'t' 表示 true，'f' 表示 false）；如果 'toggle-indeterminate' 为 true，则顺序为：indet->first state->second state->indet（并重复），否则：indet->first state->second state->first state->second state->...
toggle-indeterminate
: Boolean
说明
当用户点击组件时，除 true 和 false 外，是否还添加一个不确定（indeterminate）的状态？
keep-color
: Boolean
说明
当组件未勾选/关闭时，是否应保留颜色？

用法

标准

<template>
  <div class="q-pa-md">
    <q-checkbox v-model="val" />
  </div>
</template>

自定义图标
v2.5+

<template>
  <div class="q-pa-md">
    <q-checkbox
      v-model="val"
      checked-icon="star"
      unchecked-icon="star_border"
      indeterminate-icon="help"
    />
  </div>
</template>

标签

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <div>
        <q-checkbox v-model="right" label="Label on Right" />
      </div>

      <div>
        <q-checkbox left-label v-model="left" label="Label on Left" />
      </div>

      <div>
        <q-checkbox
          v-model="right2"
          label="Swipe"
          checked-icon="swipe_left"
          unchecked-icon="swipe_right"
          color="green"
          keep-color
        />
      </div>

      <div>
        <q-checkbox
          left-label
          v-model="left2"
          label="I agree"
          checked-icon="task_alt"
          unchecked-icon="highlight_off"
        />
      </div>
    </div>
  </div>
</template>

着色

在下面示例的第二行中，即使复选按钮未处于切换状态，设置了 keep-color 属性依然会进行着色。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox v-model="teal" label="Teal" color="teal" />
      <q-checkbox v-model="orange" label="Orange" color="orange" />
      <q-checkbox v-model="red" label="Red" color="red" />
      <q-checkbox v-model="cyan" label="Cyan" color="cyan" />
    </div>
    <div class="q-gutter-sm">
      <q-checkbox keep-color v-model="teal" label="Teal" color="teal" />
      <q-checkbox keep-color v-model="orange" label="Orange" color="orange" />
      <q-checkbox keep-color v-model="red" label="Red" color="red" />
      <q-checkbox keep-color v-model="cyan" label="Cyan" color="cyan" />
    </div>
  </div>
</template>

紧凑模式和黑色模式

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox dense v-model="teal" label="Teal" color="teal" />
      <q-checkbox dense v-model="orange" label="Orange" color="orange" />
      <q-checkbox dense v-model="red" label="Red" color="red" />
      <q-checkbox dense v-model="cyan" label="Cyan" color="cyan" />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md bg-grey-10 text-white">
    <div class="q-gutter-sm">
      <q-checkbox dark v-model="teal" label="Teal" color="teal" />
      <q-checkbox dark v-model="orange" label="Orange" color="orange" />
      <q-checkbox dark v-model="red" label="Red" color="red" />
      <q-checkbox dark v-model="cyan" label="Cyan" color="cyan" />
    </div>
  </div>
</template>

大小

除了下面的标准尺寸，您可以通过 size 属性定义自己的尺寸（最后一个示例是自定义尺寸）。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox size="xs" v-model="shape" val="xs" label="Size 'xs'" />
      <q-checkbox size="sm" v-model="shape" val="sm" label="Size 'sm'" />
      <q-checkbox size="md" v-model="shape" val="md" label="Size 'md'" />
      <q-checkbox size="lg" v-model="shape" val="lg" label="Size 'lg'" />
      <q-checkbox size="xl" v-model="shape" val="xl" label="Size 'xl'" />

      <!-- custom size -->
      <q-checkbox size="150px" v-model="shape" val="150px" label="Size '150px'" />
    </div>

    <div class="q-px-sm">
      Your selection is: <strong>{{ shape }}</strong>
    </div>
  </div>
</template>
Your selection is: [ "line" ]

不定状态

在下面的示例中，只要单击第一个复选框，它就开始在真/假之间切换。然而，第二个复选框通过设置toggle-indeterminate 属性可以在三种状态（不确定/真/假）之间切换。您可以选择设置 indeterminate-value，否则不确定的值将被视为 null

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox indeterminate-value="maybe" v-model="theModel2" label="Did you eat lunch today?" />
    </div>

    <div class="q-px-sm">
      The model data: <strong>{{ JSON.stringify(theModel2) }}</strong>
    </div>

    <div class="q-gutter-sm">
      <q-checkbox toggle-indeterminate v-model="theModel" label="Did you eat lunch today?" />
    </div>

    <div class="q-px-sm row no-wrap items-center">
      <div class="col">
        The model data: <strong>{{ JSON.stringify(theModel) }}</strong>
      </div>
      <q-btn color="primary" label="Reset" @click="onResetClick" class="q-ml-md" />
    </div>
  </div>
</template>
The model data: "maybe"
The model data: null

切换顺序

默认情况下，QCheckbox 在点击时按照下述顺序切换值：indeterminate -> checked -> unchecked。但是您可以通过 toggle-order 属性来修改此行为。这个属性决定了切换状态的顺序是 tf（默认），或者 ft（t 表示 true/checked 状态，f 表示 false/unchecked 状态）

切换顺序：

  • 如果 toggle-indeterminate 是 true，那么：indet -> first state -> second state -> indet （依次循环）
  • 否则： indet -> first state -> second state -> first state -> second state -> …
<template>
  <div class="q-pa-md">
    <q-btn class="q-mb-md" color="primary" label="Reset models" @click="resetModels" />

    <div class="q-gutter-sm">
      <q-checkbox v-model="teal" label="'tf' order" color="teal" />
      <q-checkbox toggle-order="ft" v-model="orange" label="'ft' order" color="orange" />
      <q-checkbox toggle-indeterminate v-model="red" label="'tf' order + toggle-indeterminate" color="red" />
      <q-checkbox toggle-indeterminate toggle-order="ft" v-model="cyan" label="'ft' order + toggle-indeterminate" color="cyan" />
    </div>
  </div>
</template>

数组 model

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox v-model="selection" val="teal" label="Teal" color="teal" />
      <q-checkbox v-model="selection" val="orange" label="Orange" color="orange" />
      <q-checkbox v-model="selection" val="red" label="Red" color="red" />
      <q-checkbox v-model="selection" val="cyan" label="Cyan" color="cyan" />
    </div>

    <div class="q-px-sm">
      The model data: <strong>{{ selection }}</strong>
    </div>
  </div>
</template>
The model data: [ "teal", "red" ]

自定义 model 值

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox
        v-model="customModel"
        color="secondary"
        label="Do you agree with the terms & conditions?"
        true-value="yes"
        false-value="no"
      />
    </div>

    <div class="q-px-sm">
      The model data: <strong>'{{ customModel }}'</strong>
    </div>
  </div>
</template>
The model data: 'no'

搭配 QOptionGroup

TIP

您还可以使用 QOptionGroup，当您有多组复选框时，它可以简化使用，如下面的示例所示。

<template>
  <div class="q-pa-md">
    <q-option-group
      :options="options"
      type="checkbox"
      v-model="group"
    />
  </div>
</template>

搭配 QItem

在下面的示例中，我们 渲染了一个 <label> 标签（注意 tag="label"），因此 QCheckbox 将响应 QItems 上的点击以更改切换状态。 

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
    <q-list>
      <!--
        Rendering a <label> tag (notice tag="label")
        so QCheckboxes will respond to clicks on QItems to
        change Toggle state.
      -->

      <q-item tag="label" v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="color" val="teal" color="teal" />
        </q-item-section>
        <q-item-section>
          <q-item-label>Teal</q-item-label>
        </q-item-section>
      </q-item>

      <q-item tag="label" v-ripple>
        <q-item-section avatar>
          <q-checkbox v-model="color" val="orange" color="orange" />
        </q-item-section>
        <q-item-section>
          <q-item-label>Orange</q-item-label>
          <q-item-label caption>With description</q-item-label>
        </q-item-section>
      </q-item>

      <q-item tag="label" v-ripple>
        <q-item-section avatar top>
          <q-checkbox v-model="color" val="cyan" color="cyan" />
        </q-item-section>
        <q-item-section>
          <q-item-label>Cyan</q-item-label>
          <q-item-label caption>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
    </div>

    <div class="q-px-sm q-mt-sm">
      Your selection is: <strong>{{ color }}</strong>
    </div>
  </div>
</template>
Your selection is: [ "cyan" ]

禁用

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-checkbox disable v-model="teal" label="One" />
      <q-checkbox disable v-model="orange" label="Two" />
      <q-checkbox disable v-model="red" label="Three" />
      <q-checkbox disable v-model="cyan" label="Four" />
    </div>
  </div>
</template>

禁用

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QCheckbox 声明 name 属性，否则表单数据中不会包含它：

查看更多？
Form Components 表单组件
Radio 单选框
Form Components 表单组件
Toggle 开关
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QCheckbox 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <div class="bg-grey-2 q-pa-sm rounded-borders">
        <q-checkbox
          name="accept_agreement"
          v-model="acceptAgreement"
          label="Accept agreement"
        />

        <q-checkbox
          name="subscribe_newsletter"
          v-model="subscribeNewsletter"
          label="Subscribe to newsletter"
          true-value="YES"
        />
      </div>

      <div class="bg-grey-2 q-pa-sm rounded-borders">
        <q-checkbox
          name="music_genre"
          v-model="genreRock"
          true-value="rock"
          label="Rock"
        />

        <q-checkbox
          name="music_genre"
          v-model="genreFunk"
          true-value="funk"
          label="Funk"
        />

        <q-checkbox
          name="music_genre"
          v-model="genrePop"
          true-value="pop"
          label="Pop"
        />
      </div>

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card v-if="submitEmpty" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>
        Submitted form contains empty formData.
      </q-card-section>
    </q-card>
    <q-card v-else-if="submitResult.length > 0" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
查看更多？
Form Components 表单组件
Radio 单选框
Form Components 表单组件
Toggle 开关
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。