layui 多选框的获取方法

在前端开发中，layui 是一款广泛使用的前端框架，它提供了丰富的 UI 组件和实用的功能。其中，多选框是经常会用到的表单元素之一，获取多选框的值在很多业务场景中都至关重要。

我们需要了解 layui 中多选框的基本结构。在 HTML 中创建多选框时，通常会使用如下代码：

<input type="checkbox" name="interest" lay-skin="primary" title="音乐">
<input type="checkbox" name="interest" lay-skin="primary" title="电影">
<input type="checkbox" name="interest" lay-skin="primary" title="阅读">

这里的 name 属性相同，这样方便我们后续批量获取选中的值。lay-skin 属性定义了多选框的样式风格，title 则是显示在多选框旁边的文本。

获取多选框的值有几种常见的方法。一种是使用 jQuery。在引入 jQuery 库后，我们可以通过以下代码来获取选中的值：

$(document).ready(function() {
    var checkedValues = [];
    $('input[name="interest"]:checked').each(function() {
        checkedValues.push($(this).val());
    });
    console.log(checkedValues);
});

这段代码首先定义了一个空数组 checkedValues，用于存储选中的值。然后通过 $('input[name="interest"]:checked') 选择所有被选中的多选框，再通过 each 方法遍历这些选中的多选框，并将它们的值添加到数组中。最后，将数组打印到控制台。

如果使用 layui 自身的方法来获取多选框的值，我们可以这样做：

layui.use('form', function() {
    var form = layui.form;
    form.on('checkbox(interest)', function(data) {
        var checkedValues = [];
        $('input[name="interest"]:checked').each(function() {
            checkedValues.push($(this).val());
        });
        console.log(checkedValues);
    });
});

这里通过 layui.use 引入 form 模块，然后利用 form.on 监听多选框的变化事件。当多选框的选中状态发生改变时，就会执行相应的代码来获取选中的值。

在实际应用中，获取到多选框的值后，我们可以将其发送到后端服务器进行存储或其他处理。掌握 layui 多选框的获取方法，能够帮助我们更高效地完成表单数据的处理，提升用户体验，满足各种业务需求。无论是简单的页面交互还是复杂的项目开发，这都是一项不可或缺的前端技能。