Jquery multiple checkbox

Question

I am using multiple checkbox with hierarchy ..i have parent checkbox and its child checkbox ... up to 3 4 level.. i am using this code it is working fine for me ... but i want to reduce my code..

any one please tell me..

<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>

@Neal: He want's to get his code reviewed. Off topic, but not a gimme codez kind of question. Reviews are great to become a better developer imho. — jgauffin
– jgauffin, Commented Mar 16, 2012 at 13:35
actually what is my problem .. i want to use some easy implementation for that.. — FrontEnd Expert
– FrontEnd Expert, Commented Mar 16, 2012 at 13:38

yunzen · Accepted Answer · 2012-03-16 13:49:50Z

You could start by using the $ instead of the jQuery safely (even with jQuery.noConflict())

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

Then your functions as parameters for

jQuery("input[class^='parent-']").click(...)
and
jQuery("input[class^='parent-']").each(...)
seem to be the same.

Make it so

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

with a proper name instead of myFunc

Then you can have your double assignement out of the if switch

resulting in:

(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))

These are just some transformations. I did not change any of your codes logic (hopefully)

Vinayak Phal · Accepted Answer · 2012-03-19 05:42:15Z

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');
            }
        });

Collectives™ on Stack Overflow

Jquery multiple checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest