美化input的checkbox

---

參考layui後臺模板checkbox的美化思路（https://www.layui.com/admin/std/dist/views/）

1.引入layui的相關文件:

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./jquery-1.9.1.min.js"></script>
<script src="././layui/layui.js"></script>

2.css部分

.layui-icon-ok:before{
    color: #6E2CB6;
 }
.firstCell div input[type="checkbox"]{
   display: none;
}

3.html代碼

<table class="table">
       <thead>
       <tr>
           <th width="5%" class="firstCell" style="text-align: right">
               <div class="layui-table-cell laytable-cell-1-0 laytable-cell-checkbox">
                   <input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" class="checkall">
                   <div class="layui-unselect layui-form-checkbox layui-checkall" lay-skin="primary"><i class="layui-icon"></i></div>
               </div>
           </th>
           <th width="10%">酒店店名</th>
           <th width="10%">自定義編號</th>
           <th width="10%">終端編號</th>
           <th width="30%">視頻</th>       
       </tr>
       </thead>
       <tbody>
       <tr>
           <td width="5%" class="firstCell" style="text-align: right">
               <div class="layui-table-cell laytable-cell-1-0 laytable-cell-checkbox">
                   <input type="checkbox" name="layTableCheckbox" lay-skin="primary" class="checkitem" value="1">
                   <div class="layui-unselect layui-form-checkbox layui-checkitem" lay-skin="primary"><i class="layui-icon"></i></div>
               </div>
           </td>
           <td width="10%">發的發生</td>
           <td width="10%">打發斯蒂芬</td>
           <td width="10%">切爾奇翁羣</td>
           <td width="10%">V型從V型從v</td>
       </tr>
       <tr>
           <td width="5%" class="firstCell" style="text-align: right">
               <div class="layui-table-cell laytable-cell-1-0 laytable-cell-checkbox">
                   <input type="checkbox" name="layTableCheckbox" lay-skin="primary"  class="checkitem" value="3">
                   <div class="layui-unselect layui-form-checkbox layui-checkitem" lay-skin="primary"><i class="layui-icon"></i></div>
               </div>
           </td>
           <td width="10%">發的發生</td>
           <td width="10%">打發斯蒂芬</td>
           <td width="10%">切爾奇翁羣</td>
           <td width="10%">V型從V型從v</td>
       </tr>
       </tbody>
   </table>
   <div class="all-delete">
       <input type="button" name="id" value="刪除所有選中">
   </div>

3.js部分

var $;
layui.use(['layer','jquery'],function () {
    layer = layui.layer;
    $ = layui.jquery;
});
// 全選+全不選
$('.checkall').click(function(){
    $('.checkitem').prop('checked', this.checked);
});
var tr= 'no';
$('.layui-checkall').click(function(){
    if(tr=='no'){
        $('i').addClass('layui-icon-ok');
        $('.checkall').prop('checked', true);
        $('.checkitem').prop('checked', true);
        tr = 'yes';
    }else{
        $('i').removeClass('layui-icon-ok');
        $('.checkall').prop('checked', false);
        $('.checkitem').prop('checked', false);
        tr = 'no';
    }
});
// 單選+取消單選
$('.layui-checkitem').click(function () {
    if($(this).prev('.checkitem').is(':checked')){
        $(this).find('i').removeClass('layui-icon-ok');
        $(this).prev('.checkitem').prop('checked',false);
    }else{
        $(this).find('i').addClass('layui-icon-ok');
        $(this).prev('.checkitem').prop('checked',true);
    }
});
// 獲取選中的值
var items = '';
$('.checkitem:checked').each(function(){
     items += this.value + ',';
 });
 items = items.substr(0, (items.length - 1));

---