Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Check/Uncheck ALL checkboxes when checkbox name is dynamic

Posted on 2008-09-30
9
Medium Priority
?
1,358 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 2000 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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 …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

824 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