Solved

jquery - Tick/Untick Select all depending on option chosen

Posted on 2011-09-12
12
723 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
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

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

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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.
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

809 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