Unchecking dynamically checked checkboxes. 1

[LyndonOHRC]

I'm working on a form that has a master checkbox on a table heading and one dynamically created checkbox next to every name in a database query. I'm trying to create a mailing list and want the master checkbox to check/uncheck all, then allow the user to remove some checks if desired.

I'm using a routine found in another thread to check/uncheck all checkboxes on a form. When the inputs are unchecked the user can check/uncheck any box on the form. However, if they are all dynamically set to checked then the user can't uncheck them???

Any idea what I'm missing?

checkall script:

function checkAll(el) {
  var isChecked = el.checked;
  var form = el.form;
  var els = form.elements;

  for (var x = 0; x < els.length; x++) {
    if (el != els[x]
      && els[x].type
      && els[x].type.toLowerCase() == "checkbox") {
      //  set to same state as master checkbox
      els[x].checked = isChecked;

      if (isChecked) {
        //  keep checked
        els[x].onclick = function(){this.checked = true;}
      }
      else {
        //  normal behavior
        els[x].onclick = null;
      }
    }
  }
}

html:

<form name="mailbox" method="post" enctype="text/plain">
		<tr>
			<td class="ColumnHeadingCell">
				<input type="Checkbox" 
					id="cbMaster" 
					title="Change All Mail Checks" 
					onclick="checkAll(this);"
			</td>
			<td class="ColumnHeadingCell" style="text-align: center;">
				ORI Membership
			</td>
		</tr>
		<cfoutput query="GetMembers">
			<tr style="background-color: white;">
				<td>
					<input type="Checkbox"  
						name="#GetMembers.index#"
						title="Include In Current Mail List">
				</td>
				<td>
					#LCase(GetMembers.FirstName)# #LCase(GetMembers.LastName)#
				</td>
			</tr>

		</cfoutput>
	</form>

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[monksnake]

This statement right here is what's keeping the checkboxes checked.

if (isChecked) {
   //  keep checked
   els[x].onclick = function(){this.checked = true;}
}

Essentially, if you want this to do what you want, you don't put an onclick handler on it. It'd look like this:

if (isChecked) {
   els[x].checked = true;
}
[s]else {
   //  normal behavior
   els[x].onclick = null;
}[/s]

//Remove the strikethrough info, not needed

If you check the "master" all checkboxes become checked, but it also allows you to uncheck the "unmaster" boxes afterwards.

<.

 

[LyndonOHRC]

Outstanding as usual!

Thanks Monk

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[monksnake]

You're welcome.

<.

 

[LyndonOHRC]

A followup if I may: I'm working on a onclick function for the checkboxes other than the master checkbox we discussed above. This function also needs to loop through the inputs like the checkall function does.

I'm trying to populate a link tag with the "checked" rows name.

While looping through:

function checkOne(el) {
	var isChecked = el.checked;
	var form = el.form;
	var els = form.elements;
	var txtEMailString = '';
	var txtEMailLink = '';
	var txtEmailhref='mailto://';
	var objEMailString=document.getElementById('EmailText');
	var objEMailLink=document.getElementById('EmailLink');
	for (var x = 0; x < els.length; x++) {
		if (el != els[x]
			&& els[x].type
			&& els[x].type.toLowerCase() == "checkbox") {
			if (els[x].checked) {
				txtEMailString=txtEMailString+els[x].name+'; ';
				txtEMailLink=txtEMailLink+els[x].name+'; ';
		    }
		}
	}
	objEMailString.innerHTML=txtEMailString;
	objEMailLink.innerHTML=txtEMailLink;
	objEMailLink.href=txtEmailhref+txtEMailLink;
}

It seems like the current checkbox (the one the user has just clicked) still has it's old value (prior to the click) when I'm looping through the els object.

Is this possibly the case? If this is not a clear enough question let me know...

Thanks


Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[monksnake]

If this is not a clear enough question let me know...

Yeah I'm not quite understanding what you are asking.

<.

 

[LyndonOHRC]

I'm using this onclick function to populate a string with the inputs name so i can build a link tag of checked rows. But the checkbox that has just been clicked does not seem to have the new value the user just assigned it with the click.

Here's what happens:
1. form loads with all boxes unchecked.

2. user checks row 3 on the form - all check boxes evaluate to unchecked when I loop through the els object.

3. user checks row 5. Row 3 evaluates to checked and row 5 evaluates to unchecked.

4. user checks row 7. Rows 5 and 3 evaluate to checked and row 7 evaluates to unchecked...

The opposite happens when the user is unchecking...

html:

<input type="Checkbox"  
						name="#GetMembers.email#"
						id="#GetMembers.index#"
						title="Include In Current Mail List" 
						onclick="checkOne(this);">

js:

function checkOne(el) {
	var isChecked = el.checked;
	var form = el.form;
	var els = form.elements;
	var txtEMailString = '';
	var txtEMailLink = '';
	var txtEmailhref='mailto://';
	var objEMailString=document.getElementById('EmailText');
	var objEMailLink=document.getElementById('EmailLink');
	for (var x = 0; x < els.length; x++) {
		if (el != els[x]
			&& els[x].type
			&& els[x].type.toLowerCase() == "checkbox") {
			if (els[x].checked) {
				txtEMailString=txtEMailString+els[x].name+'; ';
				txtEMailLink=txtEMailLink+els[x].name+'; ';
		    }
		}
	}
	objEMailString.innerHTML=txtEMailString;
	objEMailLink.innerHTML=txtEMailLink;
	objEMailLink.href=txtEmailhref+txtEMailLink;
}

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[monksnake]

Ok, I see, it's not counting itself cause of this:

 for (var x = 0; x < els.length; x++) {
        if ([!]el != els[x][/!]
            && els[x].type
            && els[x].type.toLowerCase() == "checkbox") {
            if (els[x].checked) {
                txtEMailString=txtEMailString+els[x].name+'; ';
                txtEMailLink=txtEMailLink+els[x].name+'; ';
            }
        }
    }

Take a look closely at the highlighted code, I think you can figure it out.

<.

 

[LyndonOHRC]

Many thanks!

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[monksnake]

<.