下面再给这个表单添加一个复选框 .. 字段要放在一个带 field 类的容器里 .. 可以使用一个 div 标签 ... 复选框也需要一个单独的容器 . 同样可以使用 div 标签 .. 上面加上 ui .. 还有 checkbox .. 表示它里面是一个复选框 ..

再添加一个复选框元素 .. input:checkbox .. 给它再添加一个标签 .. 用一个 label 标签 .. 标签上的文字是 短信通知 ..

这里显示的就是一个普通的复选框的样式 .. 点击勾选一下 .. 被勾选的这个复选框的灰色的框框里，会出现一个黑色的对号 ..

Semantic UI 为复选框还设置了几种其它的样式 .. 先看一下 toggle .. 把它放在复选框的包装上 .. 现在这个复选框的样式有点像是一个开关 .. 它的左边会出现一个圆形小图标 .. 它后面有个灰色背景的圆角矩形 .. 点击这个元素 .. 这个圆形会跑到右边来 .. 圆角矩形的背景会变成蓝色 .. 像是打开了这个开关 .. 这就相当于是勾选了这个复选框 ..

我们再试一下 slider .. 把 toggle 替换成 slider .. 现在这个复选框变成了一个滑动开关的样式 .. 点击 .. 可以勾选 .. 或者取消勾选 ..

这里我们还是需要一点 JavaScript .. 先找到页面上的复选框元素 ... 然后调用 Semantic UI 提供的 checkbox() 方法 .. 这个方法可以开启复选框的全部功能 ..

比如现在我们可以直接点击复选框元素的标签 .. 勾选 或者 取消勾选它 ..