Check/Uncheck ALL checkboxes when checkbox name is dynamic

Hi,

I have had a tough time trying to find info on this one.  I want to check/uncheck all boxes with a checkbox or link, and the only solutions i've found except for one, required that the checkbox name be the same for each checkbox.  My form has dynamic names for each checkbox.

I have found one solution which seems to ALMOST work, but what's happening is it's also unchecking the radio button that i have checked by default.  Can someone either edit this JS to only check/uncheck checkboxes, and not radio buttons??


<script language=javascript>
 
checked=false;
function checkedAll (frm1) {
	var aa= document.getElementById('frm1');
	 if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
	for (var i =0; i < aa.elements.length; i++) 
	{
	 aa.elements[i].checked = checked;
	}
      }
</script>
 
 
<form action="userupload.cfm" method="post" id="frm1">
  Check/Uncheck all <input type="checkbox" name="checkall" onClick="checkedAll(frm1);" checked>  
 
 
1. <input type="checkbox" name="dynamic1"  checked>
2. <input type="checkbox" name="dynamic2"  checked>
etc...
 
</form>

Open in new window

tags266Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
MMDeveloperConnect With a Mentor Commented:
for (var i =0; i < aa.elements.length; i++)
        {
          if (aa.elements[i].type == "checkbox") {
                    aa.elements[i].checked = checked;
          } else {}
        }
0
 
tags266Author Commented:
Awesome!!!! 99.9% there.  Is there a way to load the box checked onload?  All my other checkboxes are checked when the page loads.  What's happening here now is I have to click to check on, then click again to uncheck, then they all uncheck.  So it's taking two clicks.  

I tried putting the "checked" in the actual checkbox
<input type="checkbox" name="checkall" onClick="checkedAll(frm1);"  checked>.
The page loads with it checked, but i still need to click it two times for the rest to uncheck.  

Great job MM.
0
 
MMDeveloperCommented:
<input type="checkbox" name="checkall" onClick="checkedAll(frm1);"  checked>

is this the only item on the page with the name of "checkall" ?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
tags266Author Commented:
Yes.  that's the only one with the function.
0
 
tags266Author Commented:
<input type="checkbox" name="dynamic1" value="test" checked>
<input type="checkbox" name="dynamic2" value="test2" checked>

0
 
MMDeveloperCommented:
I'd put this somewhere on the page


window.onload = function() {
      checkedAll('frm1');
};

and I'd use this modified function

function checkedAll (frm1) {
      aa = document.getElementById(frm1);
      parentCB = document.getElementByName("checkall");
      for (var i =0; i < aa.elements.length; i++) {
            if (aa.elements[i].type == "checkbox") {
                  aa.elements[i].checked = parentCB.checked;
            } else {}
      }
}



that function, when run, will look at the first element on that page with the name of "checkall" (which should be your checkbox that has the onclick method on it). It will duplicate it's checked state to all the other checkboxes.
0
 
MMDeveloperCommented:
and I'd also change the parent checkbox from

<input type="checkbox" name="checkall" onClick="checkedAll(frm1);" checked>

to

<input type="checkbox" name="checkall" onClick="checkedAll('frm1');" checked="checked">
0
 
tags266Author Commented:
Cool, your solution did work, but i also did notice that in the function, the first line had "false" for checked which i assumed to be the state onload.  Great work, thanks so much.

<script language=javascript>
 
checked=false;
function checkedAll (frm1) {
      var aa= document.getElementById('frm1');
       if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
      for (var i =0; i < aa.elements.length; i++)
      {
       aa.elements[i].checked = checked;
      }
      }
</script>
0
 
MMDeveloperCommented:
that line was there from your original code. You were setting the checkbox's checked setting based off a variable. My last post, made the checkboxes mimic the "check all" checkbox's checked state.
0
All Courses

From novice to tech pro — start learning today.