Conditional Checkall

[Skemcin]

Ok, I have a list of items pulled from a database. The list is grouped into sections. I want to click a link at the top of each section that checks the boxes for just the items in that section. Because of what I am doing on the posting side of the form, I have to have the name attribute the same, so I've written my code to create unique ID attributes for each group, as follows:

<strong>Group A</strong><br /><input name="ti3_key" type="checkbox" value="b289531b-a850-44a1-485d" id="grp1"  /><br /><input name="ti3_key" type="checkbox" value="19779086-9827-4c1f-a050" id="grp1"  /><br /><input name="ti3_key" type="checkbox" value="68b235b1-8b6d-4ffc-9074" id="grp1"  /><br />...<strong>Group B</strong><br /><input name="ti3_key" type="checkbox" value="690ead54-e3df-470f-8c8a" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="5f62a14a-e53b-422e-a72e" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="fa898e6b-dac5-4e76-8de4" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="871c097b-04ef-4a08-b70c" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="da41fb7c-e21d-4030-91ee" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="65d23ff5-54ce-41cd-a994" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="679d6021-071b-4767-b6b1" id="grp16"  /><br />...<strong>Group C</strong><br /><input name="ti3_key" type="checkbox" value="b58ca848-bc8f-444c-9c48" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="7b1689ca-e014-48b5-a550" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="a1877b67-c069-446e-8ba7" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="9ea6dc6d-8f10-4270-bbf6" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="6dada4d7-b89d-44d8-a8ce" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="bd24f8b8-c5e1-4809-a198" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="a2ed0682-663c-4fa4-9cab" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="75e2725e-8b87-4151-a62f" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="7abcb51b-2d48-4f47-9d7e" id="grp49"  /><br />

As you can see, the name attribute is the same for all these items, but the value attribute differs for each item. The id attribute is based on the section these items are pulled from.At the top of each of these sections, I have these two link:

<a href="java script:void(0);" onclick="checkAll('grp##',1);" title="Select Group">[check]</a><a href="java script:void(0);" onclick="checkAll('grp##',0);" title="DeSelect Group">[uncheck]</a>

where the ## matches the ID attribute value.So, I've got checkAllbuilt, but so far all it does is check them all. I've hacked the script a little to get it to check up the point that I select, but that's now what I need. I just need the script to select the items with the same ID attribute value.

	function checkAll(grp,v) {		for(var i=0;i<document.frmUpdateExceptions.ti3_key.length;i++)		document.frmUpdateExceptions.ti3_key[i].checked=eval(v);}

Thanks in advance.

[alexnofue]

Hi, why don't you put the name of the checkbox generated with the group, like: ti3_keyA, and affect also the onclickthe do something like:function checkAll(group, action){ var items = document.getElementsByName(group); var itlen = items.length; for (var i = 0; i < itlen; i++) { if(action == 1) { items.checked = true; } else { items.checked = false; } }}EDIT: post it before completion

[Skemcin]

Thanks for the post.If I change the value of the name attribute, then I'll have to write server side code to parse through them once the form is submitted. I can do that if I need to, but I would prefer to do the check all in group on the client side.So, in essence, I am trying to get the javascript to functionally do this:a.) loop through all input elements with name = to ti3_keyb.) evaluate the element ID of [x] is equal to the value passed into the function [grp] then changec.) if the checked value is false, change it to true, if the checked value is true, change it to false

[jesh]

I just need the script to select the items with the same ID attribute value.

	function checkAll(grp,v) {		for(var i=0;i<document.frmUpdateExceptions.ti3_key.length;i++)		document.frmUpdateExceptions.ti3_key[i].checked=eval(v);}

Something like this?

function checkAll(grp, v){	for(var i = 0; i < document.frmUpdateExceptions.ti3_key.length; i++)	{		if(document.frmUpdateExceptions.ti3_key[i].id == grp)		{			document.frmUpdateExceptions.ti3_key[i].checked = eval(v);		}	}}

[alexnofue]

Hi, in that case you could use something likedocument.getElementsByTagName('input')then get all the checkbox and after that get only the ones with the id of the group.on a second though this might get really nasty if the page has a lot of other inputs (text, radio, ...)

function checkAll(group){   var items = document.getElementsByTagName('input');   var itlen = items.length;   for (var i = 0; i < itlen; i++)   {      if(items[i].type == 'checkbox' && items[i].id == group)      {         if(items[i].checked)         {             items[i].checked = false;         }         else         {             items[i].checked = true;         }      }   }}

ps: didn't test it

[Skemcin]

@jesh - I think that is exactly what I am looking for - I was screwing the syntax up like crazy. The snow fall has be at home today, but I'll try it first thing tomorrow when I get to work - thanks.@alexnofue - I'll try that method if I screw up jesh's suggestion. I'll start with jesh's simply 'cause it has the least modifications to what I already have scripted.Thanks for the posts.

[Skemcin]

Very nice jesh - that looks like it did the trick. I've got a little more testing to throw at it, but it looks good so far - thanks a ton.Can you take it one step farther?Can you put a condition in so the "v" value doesn't need to be passed in?In other words, how would you conditionally check the existing value to make it the opposite. This would allow one link to be used for the functionality desired.Currently:

 <a href="java script:void(0);" onclick="checkAll('grp#grp#',1);" title="Select Group">[check]</a> <a href="java script:void(0);" onclick="checkAll('grp#grp#',0);" title="Deselect Group">[uncheck]</a>

Desired:

 <a href="java script:void(0);" onclick="checkAll('grp#grp#');" title="Select/Deselect Group">[check/uncheck]</a>

[jesh]

thanks a ton.

Any time!

Can you put a condition in so the "v" value doesn't need to be passed in?

I guess it would depend on what you want to happen. If you simply want to toggle the state of each of the checkboxes, then you could do something like this:

function checkAll(grp, v){	var cb;	for(var i = 0; i < document.frmUpdateExceptions.ti3_key.length; i++)	{		cb = document.frmUpdateExceptions.ti3_key[i];		if(cb.id == grp)		{			cb.checked = !cb.checked;		}	}}

The main problem with that would be that if someone were to check one or two checkboxes and then clicked the link that was supposed to check all of the checkboxes, those that were already checked would then become unchecked - i.e. they'd simply be toggled.If you want to verify that all of the checkboxes are actually checked when you click the link, then you have to store, somewhere, a value that indicates that all the checkboxes are to be checked. This could mean passing the value as a parameter to the function, as you currently do. Or, it could mean having two different functions:

function checkAll(grp){	toggleAll(grp, true);}function uncheckAll(grp){	toggleAll(grp, false);}function toggleAll(grp, checkstate){	var cb;	for(var i = 0; i < document.frmUpdateExceptions.ti3_key.length; i++)	{		cb = document.frmUpdateExceptions.ti3_key[i];		if(cb.id == grp)		{			cb.checked = checkstate;		}	}}

Or, you could have a hidden input which keeps track of whether or not all items are checked and read that value when you run your toggle function.

<strong>Group A</strong><br /><input type="hidden" id="h_grp1" value="false" /><input name="ti3_key" type="checkbox" value="b289531b-a850-44a1-485d" id="grp1"  /><br /><input name="ti3_key" type="checkbox" value="19779086-9827-4c1f-a050" id="grp1"  /><br /><input name="ti3_key" type="checkbox" value="68b235b1-8b6d-4ffc-9074" id="grp1"  /><br />

function checkAll(grp){	var cb;	var stateElement = document.getElementById("h_" + grp);  	for(var i = 0; i < document.frmUpdateExceptions.ti3_key.length; i++)	{		cb = document.frmUpdateExceptions.ti3_key[i];		if(cb.id == grp)		{			cb.checked = stateElement.value;		}	}	stateElement.value = !stateElement.value;}

[Skemcin]

Brilliant!!:)This is what I've implemented - BIG thanks dude:

<script language="javascript" type="text/javascript">function checkAll(grp) {	var cb;	for(var i = 0; i < document.frmUpdateExceptions.ti3_key.length; i++) {		cb = document.frmUpdateExceptions.ti3_key[i];		if(cb.id == grp) {			cb.checked = !cb.checked;			}		}	}</script><form action="./" method="post" name="frmUpdateExceptions">...<strong>Group A</strong> <a href="java script:void(0);" onclick="checkAll('grp1');" title="Select or Deselect this group.">[check/uncheck]</a><br /><input name="ti3_key" type="checkbox" value="b289531b-a850-44a1-485d" id="grp1"  /><br /><input name="ti3_key" type="checkbox" value="19779086-9827-4c1f-a050" id="grp1"  /><br /><input name="ti3_key" type="checkbox" value="68b235b1-8b6d-4ffc-9074" id="grp1"  /><br />...<strong>Group B</strong> <a href="java script:void(0);" onclick="checkAll('grp16');" title="Select or Deselect this group.">[check/uncheck]</a><br /><input name="ti3_key" type="checkbox" value="690ead54-e3df-470f-8c8a" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="5f62a14a-e53b-422e-a72e" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="fa898e6b-dac5-4e76-8de4" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="871c097b-04ef-4a08-b70c" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="da41fb7c-e21d-4030-91ee" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="65d23ff5-54ce-41cd-a994" id="grp16"  /><br /><input name="ti3_key" type="checkbox" value="679d6021-071b-4767-b6b1" id="grp16"  /><br />...<strong>Group C</strong> <a href="java script:void(0);" onclick="checkAll('grp49');" title="Select or Deselect this group.">[check/uncheck]</a><br /><input name="ti3_key" type="checkbox" value="b58ca848-bc8f-444c-9c48" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="7b1689ca-e014-48b5-a550" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="a1877b67-c069-446e-8ba7" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="9ea6dc6d-8f10-4270-bbf6" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="6dada4d7-b89d-44d8-a8ce" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="bd24f8b8-c5e1-4809-a198" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="a2ed0682-663c-4fa4-9cab" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="75e2725e-8b87-4151-a62f" id="grp49"  /><br /><input name="ti3_key" type="checkbox" value="7abcb51b-2d48-4f47-9d7e" id="grp49"  /><br />...</form>

Now, (I'm getting greeedy) but if the [check/uncheck] could change relative to the state. Knowing that onload the everything would be [check] and the click would change it to [uncheck], would you use inner html to write a javascript variable out to avoid using an <input> tag like one would traditionally do.

[jesh]

would you use inner html to write a javascript variable out to avoid using an <input> tag like one would traditionally do.

Hmm. One method could be to use the DOM and add a property to the link itself for keeping track of the state. If you were to do it like that, you could modify your checkAll function as follows:

function checkAll(link, grp){	// check to see if there is a property of the anchor element which is	// called "checkstate".  If there isn't, we'll set it to true for this first time	// and then toggle it back and forth between true and false each time 	// this function is called from a particular anchor element.	if(typeof(link.checkstate) == 'undefined')	{		link.checkstate = true;	}	var cb;	for(var i = 0; i < document.frmUpdateExceptions.ti3_key.length; i++)	{		cb = document.frmUpdateExceptions.ti3_key[i];		if(cb.id == grp)		{			// rather than toggle the current state of the checkbox			//cb.checked = !cb.checked;			// we'll use the checkstate value from the anchor element			cb.checked = link.checkstate;		}	}	// now that we're through toggling all the checkboxes for this group,	// we'll toggle the checkstate for the anchor element so that the next	// time this function is called for this link, the action will be the opposite	// of what it was this time (e.g. uncheck rather than check).	link.checkstate = !link.checkstate;}

Then, in your HTML:

<strong>Group A</strong> <a href="java script:void(0);" onclick="checkAll(this,'grp1');" title="Select or Deselect this group.">[check/uncheck]</a><br />