Solved

Check/Uncheck ALL checkboxes when checkbox name is dynamic

Posted on 2008-09-30
9
1,351 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:tags266
  • 5
  • 4
9 Comments
 
LVL 15

Accepted Solution

by:
MMDeveloper earned 500 total points
ID: 22608777
for (var i =0; i < aa.elements.length; i++)
        {
          if (aa.elements[i].type == "checkbox") {
                    aa.elements[i].checked = checked;
          } else {}
        }
0
 

Author Comment

by:tags266
ID: 22608904
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
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22608922
<input type="checkbox" name="checkall" onClick="checkedAll(frm1);"  checked>

is this the only item on the page with the name of "checkall" ?
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:tags266
ID: 22608964
Yes.  that's the only one with the function.
0
 

Author Comment

by:tags266
ID: 22608970
<input type="checkbox" name="dynamic1" value="test" checked>
<input type="checkbox" name="dynamic2" value="test2" checked>

0
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22609007
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
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22609018
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
 

Author Comment

by:tags266
ID: 22609197
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
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22610528
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

Featured Post

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 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