Question

我正在使用带有层次结构的多个复选框..我有父复选框及其子复选框...最多3个4级...我正在使用此代码它对我来说很好...但我想减少我的代码..

任何人请告诉我..

<script type="text/javascript">
    jQuery(document).ready(function(){

        jQuery('input[type=checkbox]').change(function() {
            var id = jQuery(this).attr('id');
            var children = jQuery('.parent-' + id).attr('checked', jQuery(this).attr('checked'));
        });

        jQuery("input[class^='parent-']").click(function(){
            if(jQuery(this).attr('checked')){
                var id = jQuery(this).attr('class');
                var parts = id.split('-');
                var parent_node = jQuery('.lead-' + parts[1]).attr('checked', jQuery(this).attr('checked'));
            }else{
                var id = jQuery(this).attr('class');
                var parts = id.split('-');
                if(jQuery(".parent-"+ parts[1]+":checked").length==0)
                {
                    var parts = id.split('-');
                    var parent_node = jQuery('.lead-' + parts[1]).removeAttr('checked', jQuery(this).attr('checked'));
                }
            }
        });

        jQuery("input[class^='parent-']").each(function(){
            if(jQuery(this).attr('checked')){
                var id = jQuery(this).attr('class');
                var parts = id.split('-');
                var parent_node = jQuery('.lead-' + parts[1]).attr('checked', jQuery(this).attr('checked'));
            }else{
                var id = jQuery(this).attr('class');
                var parts = id.split('-');
                if(jQuery(".parent-"+ parts[1]+":checked").length==0)
                {
                    var parts = id.split('-');
                    var parent_node = jQuery('.lead-' + parts[1]).removeAttr('checked', jQuery(this).attr('checked'));
                }
            }
        });

    });
</script>

Answer 1

你可以安全地使用$而不是jQuery（即使使用jQuery.noConflict（））

(function($) {
   ... inside this code block, $ always is jQuery
}(jQuery)}

然后你的函数作为

的参数

的jQuery（ “输入[类^ = '父 - ']”）。单击（...）
和
jQuery的（ “输入[类^ = '父 - ']”）。每个（...）
似乎是一样的。

实现目标

var myFunc = function() {
 ...
}
jQuery("input[class^='parent-']").click(myFunc)  
jQuery("input[class^='parent-']").each(myFunc)

使用正确的名称而不是myFunc

然后你可以从if开关

中获得双重配置

导致：

(function($) {
    var myFunc = function() {
        var id = $(this).attr('class'),
            parts = id.split('-'),
            parent_node
        ;
        if ($(this).attr('checked')){
            parent_node = $('.lead-' + parts[1]).attr('checked', $(this).attr('checked'));
        } else if ($(".parent-"+ parts[1]+":checked").length==0) {
            parent_node = $('.lead-' + parts[1]).removeAttr('checked');
        }   
    }

    var myFunc2 = function() {
        var id = $(this).attr('id');
        var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
    }

    $(document).ready(function(){

        $('input[type=checkbox]').change(myFunc2);

        $("input[class^='parent-']").click(myFunc);

        $("input[class^='parent-']").each(myFunc);

    });

}(jQuery))

这些只是一些转变。我没有更改任何代码逻辑（希望如此）

Answer 2

jQuery("input[class^='child-']").click(function(){
            var cls = jQuery(this).attr('class');
            parts = cls.split('-');
            var check = false;
            jQuery("input[type=checkbox]."+cls).each(function() {
                if(jQuery(this).is(':checked')) {
                    jQuery("input[type=checkbox].parent-"+parts[1]).attr('checked', 'checked');
                    check = true;
                }
            });
            if(!check) { jQuery("input[type=checkbox].parent-"+parts[1]).removeAttr('checked'); }
        });

        jQuery("input[class^='parent-']").click(function() {
            parts = jQuery(this).attr('class').split('-');
            if(jQuery(this).is(':checked')) {
                jQuery("input[class$='"+parts[1]+"']").attr('checked', 'checked');
            } else {
                jQuery("input[class$='"+parts[1]+"']").removeAttr('checked');
            }
        });

Jquery多个复选框

2 个答案: