Solved

jquery - Tick/Untick Select all depending on option chosen

Posted on 2011-09-12
12
727 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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 …
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…
Suggested Courses

751 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