Semantic-UI 表单单选框内容

单选框是表单中常见的一种控件，可以让用户从预定义的选项中选择一个。在 Semantic-UI 中，单选框是通过 checkbox 组件实现的。

基本用法

要创建一个单选框，我们可以使用以下代码：

<div class="ui checkbox">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>
<div class="ui checkbox">
  <input type="radio" name="fruit" value="orange">
  <label>Orange</label>
</div>
<div class="ui checkbox">
  <input type="radio" name="fruit" value="banana">
  <label>Banana</label>
</div>

这里我们创建了三个单选框，它们都有相同的 name 属性，这意味着用户只能在它们之间进行选择。单选框中的文字使用 label 元素进行定义。

同样，我们也需要初始化单选框组件：

$('.ui.checkbox').checkbox();

显示状态

可以使用 checked 属性来定义单选框的初始状态。例如，我们可以把 Apple 单选框设为默认选中：

<div class="ui checkbox">
  <input type="radio" name="fruit" value="apple" checked>
  <label>Apple</label>
</div>

我们也可以使用 .checked 类来动态改变单选框的状态：

<div class="ui checkbox">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>
<button class="ui button" onclick="$('.ui.radio').checkbox('set checked')">Check Apple</button>
<button class="ui button" onclick="$('.ui.radio').checkbox('set unchecked')">Uncheck Apple</button>

不同类型

Semantic-UI 中有三种不同类型的单选框：基础单选框、滑块单选框和切换单选框。它们的 HTML 结构相同，只是外观不同。我们可以在 checkbox 组件后添加相应的类来实现不同类型的样式。

基础单选框

在基础单选框中，用户只需点击单选框即可进行选择。

<div class="ui checkbox">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>

滑块单选框

在滑块单选框中，用户需要拖动滑块才能进行选择。

<div class="ui slider checkbox">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>

切换单选框

在切换单选框中，用户可以切换开关来进行选择。

<div class="ui toggle checkbox">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>

禁用状态

通过 disabled 属性可以禁用单选框。当单选框处于禁用状态时，它不会响应用户的操作。

<div class="ui checkbox">
  <input type="radio" name="fruit" value="apple" disabled>
  <label>Apple</label>
</div>

只读状态

通过 readonly 属性可以将单选框设置为只读状态。当单选框处于只读状态时，用户不能修改其状态。

<div class="ui checkbox">
  <input type="radio" name="fruit" value="apple" readonly>
  <label>Apple</label>
</div>

高级用法

onChecked / onUnchecked 事件

可以通过 onChecked 和 onUnchecked 事件来监听单选框的状态变化。这些事件在用户选择或取消选择单选框时触发。

<div class="ui checkbox" data-onChecked="console.log('Checked')">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>

beforeChecked / beforeUnchecked 事件

可以通过 beforeChecked 和 beforeUnchecked 事件在用户选择或取消选择单选框之前执行某些操作。例如，可以在用户选择单选框之前先弹出确认框询问用户是否确定选择。

<div class="ui checkbox" data-beforeChecked="confirm('Are you sure?')">
  <input type="radio" name="fruit" value="apple">
  <label>Apple</label>
</div>

总结

单选框是表单中必不可少的一种控件，Semantic-UI 中提供了丰富的功能和样式。通过熟练掌握单选框的用法，可以帮助我们更好地构建高质量的 Web 应用。