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’)方法渲染複選框。

通過上述代碼的實現，我們成功地實現了複選框的打勾選取功能，並可以方便地根據需要對這個功能進行自定義擴展。