Semantic-UI 表单复选框内容

Semantic-UI 是一种流行的前端框架，为开发人员提供了用于创建响应式和可重用的 Web 设计的各种工具。其中包括用于创建表单及其元素的工具。复选框是表单中的重要元素，允许用户选择一个或多个选项。Semantic-UI 的表单复选框提供了许多选项和自定义配置选项。

表单复选框的基本使用

要在表单中添加复选框，您只需要在<form>元素内部添加一个或多个<div>元素和一个<label>元素。<label>元素的 for 属性应指向<input>元素的 id 属性。您还需要指定type="checkbox"属性。例如：

<form>
  <div class="ui checkbox">
    <input type="checkbox" id="option1">
    <label for="option1">选项1</label>
  </div>
  <div class="ui checkbox">
    <input type="checkbox" id="option2">
    <label for="option2">选项2</label>
  </div>
</form>

此外，您可以将<div>元素与其他类组合以更改复选框的外观：

• .slider：使用滑块风格。
• .toggle：使用开关风格。
• .radio：使用单选风格。
• .fitted：将复选框与标签对齐。
• .read-only：防止用户更改选择。
• .checked：将复选框设置为预选。
• .disabled：禁用复选框。

高级选项

设置默认选择

要将复选框设置为默认选择，请将checked属性设置为true。例如：

<div class="ui checkbox">
  <input type="checkbox" id="defaultChecked" checked=true>
  <label for="defaultChecked">默认选中</label>
</div>

使用 JavaScript 控制状态

您可以使用 JavaScript 方法来控制复选框的状态和值。使用 Semantic-UI，可以使用以下方法：

取值和设置值

$('.ui.checkbox').checkbox('toggle')  // 切换复选框的状态
$('.ui.checkbox').checkbox('check')   // 将复选框设置为已选
$('.ui.checkbox').checkbox('uncheck') // 将复选框设置为未选
$('.ui.checkbox').checkbox('indeterminate') // 将复选框设置为非确定状态（半选）
$('.ui.checkbox').checkbox('set checked')   // 将复选框设置为已选
$('.ui.checkbox').checkbox('set unchecked') // 将复选框设置为未选
$('.ui.checkbox').checkbox('set indeterminate') // 将复选框设置为非确定状态（半选）
$('.ui.checkbox').checkbox('is checked') // 检查复选框是否被选中
$('.ui.checkbox').checkbox('is unchecked') // 检查复选框是否没有被选中
$('.ui.checkbox').checkbox('is indeterminate') // 检查复选框是否处于非确定状态

事件

Semantic-UI 也提供了一些事件，可以在复选框的状态变化时调用。例如：

$('.ui.checkbox').checkbox({
  onChange: function() {
    if ($(this).checkbox('is checked')) {
      console.log('复选框已选中');
    } else {
      console.log('复选框未选中');
    }
  }
});

自定义标签

除了使用<label>元素外，您还可以使用自定义标签。要使用自定义标签，请将data-text属性添加到<div>元素或使用<label>元素的文本内容。例如：

<div class="ui checkbox">
  <input type="checkbox" id="customLabel">
  <label for="customLabel" data-text="自定义标签"></label>
</div>

或者：

<div class="ui checkbox">
  <input type="checkbox" id="customText">
  <label for="customText">选择 "{{data-text}}"</label>
</div>

总结

使用 Semantic-UI 表单复选框是非常简单的。您只需要使用<div>和<input>元素，可以选择设置<label>元素或使用自定义标签。使用 JavaScript，您可以控制其状态和值。等等。查看 Semantic-UI 官方文档 以获取更多信息和示例。