Solved

Check/Uncheck ALL checkboxes when checkbox name is dynamic

Posted on 2008-09-30
9
1,353 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html value of radio 14 31
asp.net open new page without popup blocker 8 19
2 separate CSS animations 2 17
Possible propagation problem 1 25
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

820 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