Solved

jquery - Tick/Untick Select all depending on option chosen

Posted on 2011-09-12
12
710 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
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 …
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

743 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

10 Experts available now in Live!

Get 1:1 Help Now