Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery - Tick/Untick Select all depending on option chosen

Posted on 2011-09-12
12
Medium Priority
?
746 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 83

Assisted Solution

by:leakim971
leakim971 earned 800 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 83

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 83

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 83

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

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…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Is your data getting by on basic protection measures? In today’s climate of debilitating malware and ransomware—like WannaCry—that may not be enough. You need to establish more than basics, like a recovery plan that protects both data and endpoints.…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

782 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