Solved

Check/Uncheck ALL checkboxes when checkbox name is dynamic

Posted on 2008-09-30
9
1,347 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
 

Author Comment

by:tags266
ID: 22608964
Yes.  that's the only one with the function.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

914 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now