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/n/283039.html