基于jqery的简单反选与全选

2020-03-04
/**
 * @description: 复选框的全选与反选,基于jquery
 * @param all_class 全选复选框的class选择器
 * @param one_class 单个复选框的class选择器
 * @return: 
 */
function  checkAllAndInvert(all_class,one_class)
{
    //全选与反选
    $(all_class).click(function(){
        if ($(this).is(':checked')) {
            $(one_class).prop('checked',true);
        } else {
            $(one_class).prop('checked',false);
        }
    })
    //子项关联全项的全选与反选
    $(one_class).click(function(){
        var all_checked = 1;
        $(one_class).each(function(){
            if (!$(this).is(':checked')) {
                all_checked = 2;
                return false;
            }
        })
        if (all_checked == 1) {
            $(all_class).prop('checked',true);
        } else {
            $(all_class).prop('checked',false);
        }
    })
    //默认的全选框是否显示
    $(document).ready(function(){
        var all_checked = 1;
        $(one_class).each(function(){
            if (!$(this).is(':checked')) {
                all_checked = 2;
                return false;
            }
        })
        if (all_checked == 1) {
            $(all_class).prop('checked',true);
        } else {
            $(all_class).prop('checked',false);
        }
    })
}
checkAllAndInvert('.applys','.apply');

 

{/if}