Semantic-UI 表单多选内容

在Web应用程序开发中，表单是最常用的交互元素之一。其中，多选表单是常见的表单类型。Semantic-UI是一个优秀的UI库，提供了丰富的表单控件和操作。下面，我们将介绍Semantic-UI中的多选表单控件。

多选表单基本用法

Semantic-UI提供了Checkbox、Radio和Toggle三种多选表单控件。其中，Checkbox是常用的多选框控件，Radio是单选框控件，Toggle是多选开关控件。它们的用法非常简单，只需要在HTML中添加相应的标签和属性即可。

Checkbox

Checkbox控件使用<div class="ui checkbox">标签和<input type="checkbox">标签组成。可以使用<label>标签作为控件的标签。

<div class="ui checkbox">
    <input type="checkbox" name="fruit" value="apple">
    <label>Apple</label>
</div>
<div class="ui checkbox">
    <input type="checkbox" name="fruit" value="banana">
    <label>Banana</label>
</div>
<div class="ui checkbox">
    <input type="checkbox" name="fruit" value="pear">
    <label>Pear</label>
</div>

效果如下：

Radio

Radio控件使用<div class="ui radio">标签和<input type="radio">标签组成。可以使用<label>标签作为控件的标签。

<div class="ui radio">
    <input type="radio" name="fruit" value="apple">
    <label>Apple</label>
</div>
<div class="ui radio">
    <input type="radio" name="fruit" value="banana">
    <label>Banana</label>
</div>
<div class="ui radio">
    <input type="radio" name="fruit" value="pear">
    <label>Pear</label>
</div>

效果如下：

Toggle

Toggle控件使用<div class="ui toggle checkbox">标签和<input type="checkbox">标签组成。

<div class="ui toggle checkbox">
    <input type="checkbox" name="terms">
    <label>Agree to terms and conditions</label>
</div>

效果如下：

多选表单样式

Semantic-UI提供了多种多选表单的样式，可以通过添加class来实现。

水平样式

Checkbox和Radio控件可以使用class="inline"实现水平布局。

<div class="inline field">
    <div class="ui checkbox">
        <input type="checkbox" name="fruit" value="apple">
        <label>Apple</label>
    </div>
    <div class="ui checkbox">
        <input type="checkbox" name="fruit" value="banana">
        <label>Banana</label>
    </div>
    <div class="ui checkbox">
        <input type="checkbox" name="fruit" value="pear">
        <label>Pear</label>
    </div>
</div>
<div class="inline field">
    <div class="ui radio">
        <input type="radio" name="fruit" value="apple">
        <label>Apple</label>
    </div>
    <div class="ui radio">
        <input type="radio" name="fruit" value="banana">
        <label>Banana</label>
    </div>
    <div class="ui radio">
        <input type="radio" name="fruit" value="pear">
        <label>Pear</label>
    </div>
</div>

效果如下：

合并样式

Checkbox和Radio控件可以使用class="toggle"实现合并的样式。

<div class="field">
    <div class="ui checkbox toggle">
        <input type="checkbox" name="fruit" value="apple">
        <label>Apple</label>
    </div>
    <div class="ui checkbox toggle">
        <input type="checkbox" name="fruit" value="banana">
        <label>Banana</label>
    </div>
    <div class="ui checkbox toggle">
        <input type="checkbox" name="fruit" value="pear">
        <label>Pear</label>
    </div>
</div>
<div class="field">
    <div class="ui radio toggle">
        <input type="radio" name="fruit" value="apple">
        <label>Apple</label>
    </div>
    <div class="ui radio toggle">
        <input type="radio" name="fruit" value="banana">
        <label>Banana</label>
    </div>
    <div class="ui radio toggle">
        <input type="radio" name="fruit" value="pear">
        <label>Pear</label>
    </div>
</div>

效果如下：

Slider样式

Toggle控件可以使用class="slider"实现Slider样式。

<div class="ui slider checkbox">
    <input type="checkbox" name="fruit" value="apple">
    <label>Apple</label>
</div>
<div class="ui slider checkbox">
    <input type="checkbox" name="fruit" value="banana">
    <label>Banana</label>
</div>
<div class="ui slider checkbox">
    <input type="checkbox" name="fruit" value="pear">
    <label>Pear</label>
</div>

效果如下：

多选表单操作

Semantic-UI提供了多种操作多选表单的方法。

获取选中值

可以使用jQuery来获取选中的值。

// 获取选中的值（多选）
$('input[name="fruit"]:checked').map(function(){
    return $(this).val();
}).get();
// 获取选中的值（单选）
$('input[name="fruit"]:checked').val();

设置选中值

可以使用jQuery来设置选中的值。

// 设置选中的值（多选）
$('input[name="fruit"]').val(['apple', 'banana']);
// 设置选中的值（单选）
$('input[name="fruit"][value="banana"]').attr('checked', true);

总结

本文介绍了Semantic-UI中的多选表单控件及样式和操作。多选表单是Web应用程序开发中常用的交互元素之一，掌握它的用法和操作对开发人员来说是十分重要的。