Checkbox group (parent/children) functionality with jQuery plugin
Checkbox group (parent/children) functionality. Makes a checkbox parent of other checkboxes.
- If the parent is clicked the children are checked/unchecked based on the parent.
- If all the children are checked, parent gets checked too.
- If there is an unchecked item in the children and if the parent is checked, it gets unchecked.
- children can be a function. In this case, that function is run agaist the parent in order to find the children. This is useful for groups of checkboxes.
- Checks/unchecks parent based on the initial status of its children at start.
Example group usage:
$(".titles input:checkbox").cbFamily(function (){ return $(this).parents("div:first").next().find("input:checkbox"); });
The plugin code:
;(function ($) { $.fn.cbFamily = function (children) { return this.each(function () { var $this = $(this); var els; if ($.isFunction(children)) { els = children.call($this); } else { els = $(children); } $this.bind("click.cbFamily", function () { els.prop('checked', this.checked).change(); }); function checkParent() { $this.prop('checked', els.length == els.filter("input:checked").length); } els.bind("click.cbFamily", function () { if ($this.prop('checked') && !this.checked) { $this.prop('checked', false).change(); } if (this.checked) { checkParent(); $this.change(); } }); // Check parents if required on initialization checkParent(); }); }; })(jQuery);
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu