I have a hierarchy of checkboxes this way,
fiddlehttp://jsfiddle.net/penk/k3cqny72/
I want to find whether the parent and super parent checkboxes are checked, on clicking the Click Me Button and have to show an alert saying, please select the corresponding Parent to proceed further.
a) If parents and super parents are checked then no need show warning alert.
b) If parent is not checked or if super parent is not checked then we need to show a warning alert.
(I.e, we need to check Super parent if there is an 3 level hierarchy (then no need to check parent , we need to check parent if there is single level hierarchy (as there is no super parent.)
I.e, in the above example,
1) If Office2/3/1 is selected the it should say Please select Office.(Parent)
2) If Assistant Manager 1/1/1 is selected then it should say Please select Vice President(Super Parent not parent Manager 1)
3) If Assistant Manager 2/2/2 is selected it should say , please select Vice President(i.e,super parent In this case no need to check parent Manager 2)
4) If Manager1/2 is selected the it should say Please select Parent Vice Parent.(Parent)
5) if Administration2/3/1 is selected it should say please select parent Administration.
6)if lABOUR 3/2/1Manager 1 is selected it should say please select parent MD. This should be continued till the end of the hierarchy .
As i have shown in the HTML, this is an dynamic checkbox hierarchy and it can be in any number.So, we should check each and every tree on clicking the click me button.
I have done select and unselect part, but as I am new to Jquery, I am not able to code with the parets and childs Details
I tried doing it storing in an array this way, Some how it is not working.
Can some one help me in this issue.?
The final alert should be consolidated one , i.e, alert should be this way for the above 3 conditions, please select Please select Administration ,Please President ,please select President.
There is no .css class defined for these checboxes,only way of differentiating each and every checkbox is is by using Unique id attribute .
cODE - html
============
<ul>
<li>
<input type="checkbox" />Office
<ul>
<li>
<input type="checkbox" />Office1</li>
<li>
<input type="checkbox" />Office2</li>
<li>
<input type="checkbox" />Office 3</li>
</ul>
</li>
</ul>
<ul>
<li>
<input type="checkbox" />Vice President
<ul>
<li>
<input type="checkbox" />Manager 1
<ul>
<li>
<input type="checkbox" />Assistant Manager 1</li>
<li>
<input type="checkbox" />Assistant Manager 1</li>
<li>
<input type="checkbox" />Assistant Manager 1</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<ul>
<li>
<input type="checkbox" />Manager 2
<ul>
<li>
<input type="checkbox" />Assistant Manager 2</li>
<li>
<input type="checkbox" />Assistant Manager 2</li>
<li>
<input type="checkbox" />Assistant Manager 2</li>
</ul>
</li>
</ul>
</ul>
<ul>
<li>
<input type="checkbox" />CEO
<ul>
<li>
<input type="checkbox" />Manager 1
<ul>
<li>
<input type="checkbox" />Assistant 1</li>
<li>
<input type="checkbox" />Assistant 2</li>
<li>
<input type="checkbox" />Assistant 3</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<ul>
<li>
<input type="checkbox" />Manager 2
<ul>
<li>
<input type="checkbox" />Assistant 4</li>
<li>
<input type="checkbox" />Assistant 5</li>
<li>
<input type="checkbox" />Assistant 6</li>
</ul>
</li>
</ul>
</ul>
<ul>
<li>
<input type="checkbox" />Administration
<ul>
<li>
<input type="checkbox" />Administration1</li>
<li>
<input type="checkbox" />Administration2</li>
<li>
<input type="checkbox" />Administration3 3</li>
</ul>
</li>
</ul>
<ul>
<li>
<input type="checkbox" />President
<ul>
<li>
<input type="checkbox" />Manager 1
<ul>
<li>
<input type="checkbox" />Accountant 1</li>
<li>
<input type="checkbox" />Accountant 1</li>
<li>
<input type="checkbox" />Accountant 1</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<ul>
<li>
<input type="checkbox" />Manager 2
<ul>
<li>
<input type="checkbox" />Assistant Manager 2</li>
<li>
<input type="checkbox" />Assistant Manager 2</li>
<li>
<input type="checkbox" />Assistant Manager 2</li>
</ul>
</li>
</ul>
</ul>
<ul>
<li>
<input type="checkbox" />MD
<ul>
<li>
<input type="checkbox" />Manager 1
<ul>
<li>
<input type="checkbox" />lABOUR 1</li>
<li>
<input type="checkbox" />lABOUR 2</li>
<li>
<input type="checkbox" />lABOUR 3</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<ul>
<li>
<input type="checkbox" />Manager 2
<ul>
<li>
<input type="checkbox" />wORKER 1</li>
<li>
<input type="checkbox" />wORKER 2</li>
<li>
<input type="checkbox" />wORKER 3</li>
</ul>
</li>
</ul>
</ul>
<input type="button" id="button" value="Click Me" />
JS
===
$('li :checkbox').on('click', function () {
var $chk = $(this),
$li = $chk.closest('li'),
$ul, $parent;
if ($li.has('ul')) {
$li.find(':checkbox').not(this).prop('checked', this.checked)
}
do {
$ul = $li.parent();
$parent = $ul.siblings(':checkbox');
if ($chk.is(':checked')) {
$parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
} else {
$parent.prop('checked', false)
}
$chk = $parent;
$li = $chk.closest('li');
} while ($ul.is(':not(.someclass)'));
});
var onClick = function() {
alert('Hi');
};
$('#button').click(onClick);
