layui多选框：用途与实现

layui多选框是一款基于layui框架开发的多选框插件，可以方便地管理多个选择项，并且支持数据回现功能、自定义多选框样式等功能。在本文中，我们将对layui多选框进行详细的解析和讲解。

一、layui多选框样式

layui多选框的样式可以通过在HTML中添加class属性来自定义，具体的样式定义方式如下所示：

  
  /* 多选框样式 */
  .layui-checkbox{position:relative;vertical-align:middle;top:3px;display:inline-block;*display:inline;zoom:1;padding-right:5px;font-size:14px}
  .layui-form{position:relative;*zoom:1}
  .layui-form-item{margin-bottom:25px;zoom:1}
  .layui-form-label{float:left;width:100px;text-align:right;line-height:36px;padding-right:10px;color:#333;font-size:14px}
  .layui-input-block,.layui-form-mid{margin-left:115px;display:inline-block;*display:inline-block;line-height:36px;zoom:1}
  .layui-input-block{width:auto}
  .layui-form-mid{padding-right:10px}
  .layui-form-select{position:relative;display:inline-block;*display:inline;zoom:1;width:180px;height:36px;line-height:36px;border:1px solid #d2d2d2;background-color:#fff;text-align:left;cursor:pointer}
  .layui-form-selected{position:relative;z-index:2}
  .layui-select-tips{color:#a9a9a9}
  .layui-select-title{position:relative;line-height:36px;padding-left:10px}
  .layui-edge{position:absolute;right:0;top:0;padding:0 10px;height:34px;line-height:34px;border-left:1px solid #d2d2d2;background-color:#fff;cursor:pointer}
  .layui-form-checkbox{position:relative;display:inline-block;*display:inline;zoom:1;margin-right:10px;line-height:22px}
  .layui-form-checkbox input[type=checkbox]{position:absolute;top:0;left:0;display:none}
  .layui-form-checkbox i{font-size:18px;font-style:normal;color:#585858;text-align:center;display:inline-block;width:22px;height:22px;line-height:22px;border:1px solid #cccccc;border-radius:2px;background-color:#fff}
  .layui-form-checkbox:hover i,.layui-form-checkbox i:hover{color:#5fb878;border-color:#5fb878}
  .layui-form-checkbox[lay-skin=primary] i{color:#fff;border-color:#666;background-color:#666}
  .layui-form-checkbox[lay-skin=primary]:hover i,.layui-form-checkbox[lay-skin=primary] i:hover{color:#fff;background-color:#5fb878;border-color:#5fb878}
  

通过以上的CSS样式，我们可以轻松地自定义多选框的样式，比如改变多选框的颜色和大小等，满足不同项目的需求。

二、layui多选框数据回现

layui多选框支持数据回现功能，即可以将先前选中的选项自动勾选。为了实现这个功能，我们需要记录用户选择的选项，从而在后续操作中自动回显。

下面是一个使用layui多选框并支持数据回现功能的完整代码示例：

  
  // HTML代码
  <div class="layui-form-item">
    <label class="layui-form-label">喜欢的颜色</label>
    <div class="layui-input-block">
      <input type="checkbox" name="color[]" value="红色" title="红色">
      <input type="checkbox" name="color[]" value="黄色" title="黄色">
      <input type="checkbox" name="color[]" value="蓝色" title="蓝色">
      <input type="checkbox" name="color[]" value="绿色" title="绿色">
    </div>
  </div>

  // JavaScript代码
  layui.use('form', function(){
    var form = layui.form;
    //记录用户的选择
    var checkedData = ['红色', '蓝色'];
    //数据回显
    for(var i = 0; i < checkedData.length; i++){
      $('input:checkbox[value="'+checkedData[i]+'"]').prop('checked', true);
    }
    form.render('checkbox');
  });
  

上述代码中，我们首先使用HTML代码创建了一个含有多个选项的多选框，并使用name属性来定义选项的名称，这个名称会在提交表单时使用。

然后，在JavaScript中我们使用了layui的form模块来实现数据回显功能。首先，我们记录了用户选择的选项，这里假设用户曾经选择了红色和蓝色。然后，我们使用jQuery选择器找到对应的选项，将选项的checked属性设置为true，实现数据回显。最后，我们调用form.render('checkbox')来重渲染多选框，使其显示更新后的结果。

三、layui复选框

layui交互式前端UI框架还提供了复选框插件，与多选框插件类似，它可以方便地管理选项并支持数据回显功能，在写复选框的过程中，可以指定选项是否可以编辑、是否可以搜索，还可以自定义选项的字体大小、颜色等。

下面是一个使用layui复选框的完整代码示例：

  
  // HTML代码
  <div class="layui-form-item">
    <label class="layui-form-label">喜欢的水果</label>
    <div class="layui-input-block">
      <select name="fruit[]" multiple="multiple" lay-filter="fruit">
        <option value="苹果" selected>苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="橙子" selected>橙子</option>
        <option value="梨子">梨子</option>
        <option value="西瓜">西瓜</option>
      </select>
    </div>
  </div>

  // JavaScript代码
  layui.use('form', function(){
    var form = layui.form;
    form.render('select');
  });
  

上述代码中，我们首先使用HTML代码创建了一个含有多个选项的复选框，并使用name属性来定义选项的名称，这个名称会在提交表单时使用。此外，我们还添加了lay-filter属性以实现复选框的联动效果（详见layui文档）。

然后，在JavaScript代码中，我们使用layui的form模块来创建复选框，使用form.render('select')语句渲染复选框即可。

四、layui复选框打勾选取

在实际使用中，常常需要对复选框进行自定义操作，比如实现全选/全不选功能，或者实现复选框的多级选中（选中父级则子级全部选中）等。下面是一个简单的例子，展示了如何通过JavaScript代码实现复选框的相关功能。

  
  // HTML代码
  <div class="layui-form-item">
    <label class="layui-form-label">喜欢的水果</label>
    <div class="layui-input-block">
      <input type="checkbox" name="fruit[]" value="苹果" title="苹果" class="fruit">
      <input type="checkbox" name="fruit[]" value="香蕉" title="香蕉" class="fruit">
      <input type="checkbox" name="fruit[]" value="橙子" title="橙子" class="fruit">
      <input type="checkbox" name="fruit[]" value="梨子" title="梨子" class="fruit">
      <input type="checkbox" name="fruit[]" value="西瓜" title="西瓜" class="fruit">
    </div>
  </div>

  // JavaScript代码
  layui.use('form', function(){
    var form = layui.form;
    $('.selectAll').on('click', function(){
      if($(this).prop('checked')){
        $('.fruit').prop('checked', true);
      }else{
        $('.fruit').prop('checked', false);
      }
      form.render('checkbox');
    });
    form.on('checkbox(fruit)', function(data){
      if(data.elem.checked){
        if($('.fruit:checked').length === $('.fruit').length){
          $('.selectAll').prop('checked', true);
        }
      }else{
        $('.selectAll').prop('checked', false);
      }
      form.render('checkbox');
    });
  });
  

在上述代码中，我们使用了常规的HTML代码定义了一组复选框，并使用name属性来定义选项的名称。我们还添加了一个全选的复选框，用于全选/全不选。

在JavaScript代码中，我们使用Layui的form模块来创建复选框，并使用jQuery选择器绑定点击事件，通过判断全选框的状态来实现全选/全不选功能；同时，使用form.on('checkbox', function(data){})方法绑定复选框的点击事件，当一个复选框被点击时，更新全选框的状态，并用form.render('checkbox')方法渲染复选框。

通过上述代码的实现，我们成功地实现了复选框的打勾选取功能，并可以方便地根据需要对这个功能进行自定义扩展。