Solved

jquery - Tick/Untick Select all depending on option chosen

Posted on 2011-09-12
12
717 Views
Last Modified: 2012-05-12
Hello Experts,

Please see the following link:
Example

What I am trying to do is automatically check/uncheck the relevant 'select all' checkboxes depending on whether the siblings have all been checked.

For example, if I check Sub1->1...3, then the Select all under Sub1 should be ticked as well.
If I then untick any of them, this should automatically untick the 'select all' box.
If I think tick every single checkbox, this should tick Main->select all (as everything has been ticked) and vice versa.

Hope that makes sense.

Please can anyone help me with this?

Many Thanks for any help!
0
Comment
Question by:jagku
  • 6
  • 4
  • 2
12 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 36524230
try the attached code:
<script type="text/javascript"> 
$(function() {
	$('li.selectAll>input:checkbox').bind('click',function(){
//NOTE" this.checked causes this to "toggle". In other words, if the SELECT ALL is checked
//all the children will be checked. If the SELECT ALL is unchecked, all the children will become
//unchecked. IF you want it to be only CHECKED all the time, then change this.checked to true
		$('>li>input:checkbox',$(this).closest('ul')).attr('checked',this.checked);
	});
});
</script>

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 200 total points
ID: 36524308
Test page : http://jsfiddle.net/8BJmk/
$(":checkbox", ".noBulletsWithIndent").change(function() {
    var $p = $(this).closest("ul");
    var _checked = $p.find(":checkbox:gt(0):checked").length;
    var ___total = $p.find(":checkbox:gt(0)").length;
    if( _checked == ___total ) {
        $p.find(".selectAll :checkbox").attr("checked", true);
    }
    else {
        $p.find(".selectAll :checkbox").attr("checked", false);
    }
})

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 36525223
Here's the complete code ( for the selectAll and for the inidividual checkboxes):
<html> 
<head> 
<style> 
	ul.noBulletsWithIndent {
		list-style-type: none;
	}
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript"> 
$(function() {
	$('li.selectAll>input:checkbox').bind('click',function(){

		$('>li>input:checkbox',$(this).closest('ul')).attr('checked',this.checked);
	});

	$('input[type=checkbox]').bind('click',function(){
		var ul=$(this).closest('ul');
		$('>li.selectAll>:checkbox:eq(0)',ul).attr('checked', $('>li>:checkbox:gt(0):checked',ul).size()==$('>li>:checkbox:gt(0)',ul).size() );
	});
});
</script> 
</head> 
</body> 
<ul class='noBulletsWithIndent'> 
	<li style="margin: 5px 0;">[+]Main</li> 
	<li> 
		<ul class="noBulletsWithIndent" id="sub_10"> 
			<li class="selectAll"><input type="checkbox" name="_10" value="ALL">Select All</li> 
			<li><input type="checkbox" name="_44" value="44">1</li> 
			<li><input type="checkbox" name="_38" value="38">2</li> 
			<li style="margin: 5px 0;">[+]Sub1</li> 
			<li> 
				<ul class="noBulletsWithIndent" id="sub_101"> 
				<li class="selectAll"><input type="checkbox" name="_101" value="ALL">Select All</li> 
				<li><input type="checkbox" name="_61" value="61" checked>1</li> 
				<li><input type="checkbox" name="_52" value="52">2</li> 
				<li><input type="checkbox" name="_37" value="37">3</li> 
				</ul> 
			</li> 
			<li style="margin: 5px 0;">[+]Sub2</li> 
			<li> 
				<ul class="noBulletsWithIndent" id="sub_99"> 
					<li class="selectAll"><input type="checkbox" name="_99" value="ALL">Select All</li> 
					<li><input type="checkbox" name="_51" value="51">1</li> 
					<li><input type="checkbox" name="_49" value="49">2</li> 
					<li><input type="checkbox" name="_48" value="48">3</li> 
				</ul> 
			</li> 
			<li><input type="checkbox" name="_41" value="41">3</li> 
			<li><input type="checkbox" name="_8" value="8">4</li> 
			<li><input type="checkbox" name="_9" value="9">5</li> 
		</ul> 
	</li> 
</ul> 
</head> 
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 36525245
>>Test page : http://jsfiddle.net/8BJmk/
If I am not mistaken, the "3,4,5" items at the bottom "belong" to the first "1,2" (Main) list. Thus clicking 1,2,3,4,5 should click the first Select all.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36526686
Corrected : http://jsfiddle.net/8BJmk/1/

$(":checkbox", ".noBulletsWithIndent").change(function() {
			var $p = $(this).closest("ul");
			var _checked = $p.find(">li>:checkbox:gt(0):checked").length;
			var ___total = $p.find(">li>:checkbox:gt(0)").length;
			if( _checked == ___total ) {
				$p.find(".selectAll:first :checkbox").attr("checked", true);
			}
			else {
				$p.find(".selectAll:first :checkbox").attr("checked", false);
			}
		})

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 36529790
@leakim971:
>>Corrected
>>                  var _checked = $p.find(">li>:checkbox:gt(0):checked").length;
>>                  var ___total = $p.find(">li>:checkbox:gt(0)").length;
Those are the same rules/selectors I used! Wouldn't it have been easier to just say "Refer to Hielo's post"? :)

Quick Question for you - are those jsfiddle.net links temporary?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 82

Expert Comment

by:leakim971
ID: 36531177
>Those are the same rules/selectors I used! Wouldn't it have been easier to just say "Refer to Hielo's post"? :)
You rigth, sorry, I did not see that, sincerely

>Quick Question for you - are those jsfiddle.net links temporary?
I did some quick search but I did not find something about the retention, that's why I post the main code at EE each time



0
 
LVL 82

Expert Comment

by:hielo
ID: 36532015
>>I did some quick search but I did not find something about the retention
Thanks for your time. I just thought you might know right off the top of your head.

Regards,
Hielo
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36532051
>Thanks for your time. I just thought you might know right off the top of your head.

No worry, I did the searches before your question.
0
 

Author Comment

by:jagku
ID: 36534609
Hi hielo and leakim971,

Many Thanks for this.
It almost works - but I think I wasn't very clear:

The top 'select all' should only be checked if every checkbox in the tree has been checked.

How can the code be adjusted to cater for this?

Many Thanks!
0
 
LVL 82

Accepted Solution

by:
hielo earned 300 total points
ID: 36536241

<html> 
<head> 
<style> 
	ul.noBulletsWithIndent {
		list-style-type: none;
	}
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript"> 
$(function() {
	$('li.selectAll>input:checkbox').bind('click',function(){
		var ul=$(this).closest('ul');
		if('ALL'==this.value &&'sub_10'==ul.attr('id'))
			$(':checkbox').attr('checked',this.checked);
		else
			$('>li>input:checkbox',$(this).closest('ul')).attr('checked',this.checked);
	});

	$('input[type=checkbox]').bind('click',function(){
		var ul=$(this).closest('ul');
		$('>li.selectAll>:checkbox:eq(0)',ul).attr('checked', $('>li>:checkbox:gt(0):checked',ul).size()==$('>li>:checkbox:gt(0)',ul).size() );
		$(':checkbox:eq(0)').attr('checked', $(':checkbox:gt(0):checked').size()==$(':checkbox:gt(0)').size() );
	});
});
</script> 
</head> 
</body> 
<ul class='noBulletsWithIndent'> 
	<li style="margin: 5px 0;">[+]Main</li> 
	<li> 
		<ul class="noBulletsWithIndent" id="sub_10"> 
			<li class="selectAll"><input type="checkbox" name="_10" value="ALL">Select All</li> 
			<li><input type="checkbox" name="_44" value="44">1</li> 
			<li><input type="checkbox" name="_38" value="38">2</li> 
			<li style="margin: 5px 0;">[+]Sub1</li> 
			<li> 
				<ul class="noBulletsWithIndent" id="sub_101"> 
				<li class="selectAll"><input type="checkbox" name="_101" value="ALL">Select All</li> 
				<li><input type="checkbox" name="_61" value="61" checked>1</li> 
				<li><input type="checkbox" name="_52" value="52">2</li> 
				<li><input type="checkbox" name="_37" value="37">3</li> 
				</ul> 
			</li> 
			<li style="margin: 5px 0;">[+]Sub2</li> 
			<li> 
				<ul class="noBulletsWithIndent" id="sub_99"> 
					<li class="selectAll"><input type="checkbox" name="_99" value="ALL">Select All</li> 
					<li><input type="checkbox" name="_51" value="51">1</li> 
					<li><input type="checkbox" name="_49" value="49">2</li> 
					<li><input type="checkbox" name="_48" value="48">3</li> 
				</ul> 
			</li> 
			<li><input type="checkbox" name="_41" value="41">3</li> 
			<li><input type="checkbox" name="_8" value="8">4</li> 
			<li><input type="checkbox" name="_9" value="9">5</li> 
		</ul> 
	</li> 
</ul> 
</head> 
</html>

Open in new window

0
 

Author Closing Comment

by:jagku
ID: 36536616
I gave hielo a few more points because he gave me the final correct solution.
Thanks a lot (as usual!).
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now