Ionic复选框

Ionic复选框 与切换几乎相同。这两种风格不同，但用于相同的目的。

添加复选框

创建复选框表单时，需要将 复选框 类名称添加到标签和输入元素。以下示例显示了两个简单的复选框，一个是已选中，另一个未选中。

<label class = "checkbox">
   <input type = "checkbox">
</label>

<label class = "checkbox">
   <input type = "checkbox">
</label>

上面的代码将生成以下屏幕 -

Ionic复选框

多个复选框

正如我们已经展示的那样，该列表将用于多个元素。现在我们将为每个列表项使用 item-checkbox 类。

<ul class = "list">
   <li class = "item item-checkbox">
      Checbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox e
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

上面的代码将生成以下屏幕 -

Ionic复选框列表

样式复选框

如果要设置复选框的样式，则需要使用 复选框 前缀应用任何Ionic颜色类。请检查以下示例以查看其外观。我们将使用此示例的复选框列表。

<ul class = "list">
   <li class = "item item-checkbox checkbox-light">
      Checbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox checkbox-stable">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-positive">
      Checkbox 3
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-calm">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-balanced">
      Checkbox 5
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-energized">
      Checkbox 6
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-assertive">
      Checkbox 7
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-royal">
      Checkbox 8
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-dark">
      Checkbox 9
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

上面的代码将生成以下屏幕 -

Ionic复选框颜色