jquerychecked詳解

一、核心概念

jquerychecked是一個基於jQuery的複選框和單選框美化插件。它可以自定義樣式和動畫效果，提供默認樣式，支持Ajax非同步數據填充，同時還支持在某些情況下進行數據聯動。

jquerychecked的核心思想是通過禁用原生的表單元素，並通過JavaScript生成一組div來實現表單元素的美化。它支持組合使用css設置改變其外觀、通過JavaScript設置其狀態和動畫效果、以及使用回調函數進行數據的保存。

它特別適合用於需要大量的複選框和單選框，並且需要美化它們的Web應用。

二、基本用法

在使用jquerychecked之前，我們需要事先引入jQuery庫和jquerychecked插件：

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jquerychecked.js"></script>

然後，我們需要對需要美化的複選框或單選框調用jquerychecked方法：

    $(':checkbox').jquerychecked({
        checkboxs: 'div.check',
        checkall: 'input[name="checkall"]',
        callback: function(){
            console.log('callback!');
        }
    });

其中，開頭的「$(‘:checkbox’)」是jQuery的選擇器，表示選擇頁面上的所有複選框。接下來是jquerychecked方法，它接受一個對象作為參數，其中有三個參數是必須的：

checkboxs：美化後的複選框或單選框所在的div元素的CSS選擇器字元串。
checkall：實現全選功能的HTML元素的CSS選擇器字元串。
callback：完成操作後要執行的回調函數。

三、高級用法

jquerychecked提供了許多高級功能，如非同步數據填充、數據聯動、定時刷新等。下面將詳細介紹這些高級功能。

1. 非同步數據填充

在某些情況下，我們需要使用Ajax從伺服器上獲取數據來填充複選框或單選框。jquerychecked提供了ajaxBeforeSend和ajaxSuccess兩個回調函數來幫助我們完成非同步數據填充。

首先，我們需要在調用jquerychecked方法時傳入url來指定數據來源：

    $(':checkbox').jquerychecked({
        url: '/data',
        checkboxs: 'div.check',
        checkall: 'input[name="checkall"]',
        callback: function(){
            console.log('callback!');
        }
    });

其中，「url」是伺服器端接收Ajax請求的路徑。

接下來，在回調函數里，我們需要實現ajaxBeforeSend和ajaxSuccess兩個函數：

    $(':checkbox').jquerychecked({
        //...
        ajaxBeforeSend: function(jqXHR, settings){
            // 在ajax請求被發送之前調用該函數。
            console.log('ajaxBeforeSend');
        },
        ajaxSuccess: function(data, textStatus, jqXHR){
            // ajax請求成功後調用該函數。
            console.log('ajaxSuccess');
            // 在該函數內部使用數據填充複選框或單選框。
        }
    });

其中的data參數就是從伺服器端返回的數據。我們需要在這個函數內部使用數據來填充複選框或單選框，例如：

    $(':checkbox').jquerychecked({
        //...
        ajaxSuccess: function(data, textStatus, jqXHR){
            console.log('ajaxSuccess');
            var items = $.parseJSON(data); // 將字元串轉換為JSON對象
            var divs = $('div.check');
            $.each(items, function(i, item){
                var div = divs.eq(i);
                div.find('label').html(item.text);
                div.find('input').val(item.value);
            });
            // 以上代碼通過循環把每個div的文本和value設置為伺服器端返回的數據中的對應項。
        }
    });

2. 數據聯動

jquerychecked支持在複選框或單選框之間進行數據聯動，當一個複選框選中或取消選中時，可以觸發另一個或多個複選框的狀態改變。我們需要在調用jquerychecked方法時傳入linkage參數來指定聯動規則。

首先，我們需要在每個需要聯動的複選框或單選框的HTML標籤的data-linkage屬性上寫入所依賴的複選框或單選框的選擇器字元串，例如：

    <div class="check">
        <input type="checkbox" name="demo[]" value="1" data-linkage="[name='demo[]'][value='2'],[name='demo[]'][value='3']">
        <label>選項1</label>
    </div>
    <div class="check">
        <input type="checkbox" name="demo[]" value="2">
        <label>選項2</label>
    </div>
    <div class="check">
        <input type="checkbox" name="demo[]" value="3">
        <label>選項3</label>
    </div>

這段代碼中，第一個複選框依賴第二個和第三個複選框，因此在第一個複選框的data-linkage屬性上寫入了"[name=’demo[]’][value=’2′],[name=’demo[]’][value=’3′]"字元串。

接下來，在調用jquerychecked方法時，我們需要傳入linkage參數，例如：

    $(':checkbox').jquerychecked({
        //...
        linkage: function(checked, current){
            if(current.is(':checkbox')){
                var lk = current.attr('data-linkage');
                if(lk){
                    checked.find(lk).prop('checked', current.prop('checked'));
                }
            }
        }
    });

其中的checked參數是被聯動的複選框或單選框的父元素的jQuery對象，current參數是當前觸髮狀態改變的複選框或單選框的jQuery對象。

這個聯動函數會首先判斷當前觸髮狀態改變的元素是否為複選框或單選框，如果是，則在其data-linkage屬性中查找依賴的複選框或單選框，並將它們的狀態設置為與當前元素相同。

3. 定時刷新

在一些需要與伺服器端保持實時同步的Web應用中，我們需要定時從伺服器端獲取最新數據，並更新複選框或單選框的狀態。jquerychecked提供了定時刷新的功能，我們可以在調用jquerychecked方法時傳入interval來指定刷新間隔。

首先，我們需要在調用jquerychecked方法時傳入url來指定定時刷新的數據來源：

    $(':checkbox').jquerychecked({
        url: '/data',
        checkboxs: 'div.check',
        checkall: 'input[name="checkall"]',
        interval: 5000, // 每隔5秒鐘刷新一次
        callback: function(){
            console.log('callback!');
        }
    });

然後，我們需要在回調函數里，實現refresh函數：

    $(':checkbox').jquerychecked({
        //...
        refresh: function(data){
            console.log('refresh');
            // 在該函數內部使用data來刷新複選框或單選框的狀態。
        }
    });

其中的data參數就是從伺服器端返回的數據。我們需要在這個函數內部使用數據來刷新複選框或單選框的狀態，例如：

    $(':checkbox').jquerychecked({
        //...
        refresh: function(data){
            console.log('refresh');
            var items = $.parseJSON(data); // 將字元串轉換為JSON對象
            var divs = $('div.check');
            divs.each(function(){
                var div = $(this);
                var input = div.find('input');
                var value = input.val();
                var item = $.grep(items, function(x){ return x.value == value; });
                if(item.length > 0){
                    var text = item[0].text;
                    input.prop('checked', true);
                    div.find('label').html(text);
                    div.removeClass('unchecked bycheck');
                }else{
                    input.prop('checked', false);
                    div.find('label').html('');
                    div.addClass('unchecked');
                }
            });
            // 以上代碼通過循環把每個div的文本和狀態設置為伺服器端返回的數據中的對應項。
        }
    });

四、總結

本文詳細介紹了jquerychecked插件的核心概念和基本用法，以及其高級用法，包括非同步數據填充、數據聯動和定時刷新等。通過學習本文，相信大家已經掌握了如何使用jquerychecked插件來美化複選框和單選框，以及通過一些高級技巧來構建複雜的表單界面。希望本文能夠對大家有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/283039.html