Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Select all checkboxes 2

Status
Not open for further replies.
bateman23

bateman23

Programmer
Mar 2, 2001
145
DE
Hi,
i've got a form with multiple checkboxes.
I want another checkbox, which "activates" all the other checkboxes, like "Select all". Is there a way to do this with pure html and javascript?

thanx,
Daniel

---------------------------------------
Visit me @:
 
Sort by date Sort by votes
This should be posted in the JavaScript forum. However, here's a solution. Let me know if it works for you.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function selectAll() {
    var the_form = document.the_form;
	if (the_form.cbAll.checked == true) {
    	for (var i = 0; i < the_form.elements.length; i++) {
		    if (the_form.elements[i].name != 'cbAll' && the_form.elements[i].type == 'checkbox') {
				the_form.elements[i].checked = true;
			}
	    }
	}
}
-->
</SCRIPT>

</HEAD>

<BODY>
<FORM NAME="the_form">
Checkbox 1<INPUT TYPE="checkbox" name="cb1"><BR>
Checkbox 3<INPUT TYPE="checkbox" name="cb2"><BR>
Checkbox 2<INPUT TYPE="checkbox" name="cb3"><BR><BR>
Check All<INPUT TYPE="checkbox" name="cbAll" onclick="selectAll();">
</FORM>
</BODY>
</HTML>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
yup:
assuming checkbox name is "CheckBx"

function CheckAll()
{
TheChk=document.FormName.CheckBx
for(i=0;i<TheChk.length;i++)
TheChk.checked=true
}


call this function in the onclick event:
<input type="checkbox"..... onclick="CheckAll()">Check All

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
aha u got before me clflava...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote

vbkris -

Wouldn't that only work if all checkboxes in the form were the same name?

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
yup, i assumed that he wants a "Yahoo" kind of checkbox (where u can check all the mails at one go)...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
One more question, why doesn't this code work? - I can't figure it out.
It should select all checkboxes and also - on a second click - deselect all...:

Code: 
function SelectAll() {
if(document.the_form.alldata.checked!="checked") {
 TheChk=document.the_form.loeschen
 for(i=0;i<TheChk.length;i++)
 TheChk[i].checked=true
}
else{ 
 document.the_form.alldata.checked="";
 TheChk=document.the_form.loeschen
 for(i=0;i<TheChk.length;i++)
 TheChk[i].checked=""
}
}

---------------------------------------
Visit me @:
 
Upvote 0 Downvote
last code line should be

TheChk.checked=!true


as in "not true" therefore false just to confuse you.





Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
HAHA!!

Or just [tt]TheChk.checked = false[/tt]

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
A follow-up question to cLFlaVA and vbkris.

Once all checkboxes are checked, if I uncheck one checkbox other than "Check All" checkbox, I want that "Check All" checkbox is also unchecked accordingly but retain the rest checkboxes are still checked.

How can I do this?

I tried following, it does not work.

Code: 
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<SCRIPT LANGUAGE="JavaScript">
function selectAll() 
{
  var the_form = document.the_form;
  if (the_form.cbAll.checked == true) 
  {
    for (var i = 0; i < the_form.elements.length; i++) 
    {
      if (the_form.elements[i].name != 'cbAll' && the_form.elements[i].type == 'checkbox') 
      {
        the_form.elements[i].checked = true;
      }
    }
  }
  else
  {
    for (var i = 0; i < the_form.elements.length; i++) 
    {
      the_form.elements[i].checked = false;
    }
  }
}

function selectThis() 
{
  var the_form = document.the_form;
  if (the_form.cbAll.checked == true) 
  {
    for (var i = 0; i < the_form.elements.length; i++) 
    {
      if(the_form.elements[i].checked == false)
      {
        the_form.cbAll.checked == false;
      }
    }
  }
}
</SCRIPT>

</HEAD>

<BODY>
<FORM NAME="the_form">
Checkbox 1<INPUT TYPE="checkbox" name="cb1" onclick="selectThis();"><BR>
Checkbox 3<INPUT TYPE="checkbox" name="cb2" onclick="selectThis();"><BR>
Checkbox 2<INPUT TYPE="checkbox" name="cb3" onclick="selectThis();"><BR><BR>
Check All<INPUT TYPE="checkbox" name="cbAll" onclick="selectAll();">
</FORM>
</BODY>
</HTML>

Thank you for your help!
 
Upvote 0 Downvote
Hi cyan01...

Change your function to this:

Code: 
function selectAll(c) {
    var the_form = document.the_form;
    if (c) {
        for (var i = 0; i < the_form.elements.length; i++) {
            if (the_form.elements[i].name != 'cbAll' && the_form.elements[i].type == 'checkbox')
                the_form.elements[i].checked = true;
        }
    }
}

And change your last checkbox to this:

Code: 
Check All<input type="checkbox" name="cbAll" onclick="selectAll(this.checked);">

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Thank you, cLFlaVA. However, unfortunately, It does not work or it does the work which is not what I want. I guess that I did not make myself clear. Let me try one more time.

Here is what I want:

1) Once the "Check All" box is checked, every single one will be checked. Both of your new code and my old code can do that -- it is fine!

2) Once the "Check All" box is UNCHECKED, every single one will be UNCHECKED. My old code does this, but your new code does not.

3) Once the "Check All" box is checked and the rest checkboxes are automatically checked, if I uncheck any one of the checkboxes other than "Check All", the "Check All" checkbox should automatically become UNCHECKED -- neither your code nor mine works this way.

BTW, why did I not get email notice anymore?
 
Upvote 0 Downvote
Oh ok, I understand now, I have code that does just that - let me find it for you.

You don't get emailed anymore because you need to click that checkmark at the bottom of this thread labeled "Click here to mark this thread for e-mail notification".

I'll post again in a few minutes.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
This will work:

change your function to this:

Code: 
function selectThis(c)
{
  var the_cb = document.the_form.cbAll;
  if (!c) the_cb.checked = false;
}

And change the calls to the function to this (slight change):

Code: 
Checkbox 1<INPUT TYPE="checkbox" name="cb1" onclick="selectThis(this.checked);"><BR>
Checkbox 3<INPUT TYPE="checkbox" name="cb2" onclick="selectThis(this.checked);"><BR>
Checkbox 2<INPUT TYPE="checkbox" name="cb3" onclick="selectThis(this.checked);"><BR><BR>

The only thing I wasn't sure of is: what if you manually check all three checkboxes, do you want the "Check All" box to automatically check?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
503
vacunita
vacunita
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
186
PeDa
PeDa
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
155
1DMF
1DMF
1DMF
  • Locked
  • Question
CSS &amp; Checkboxes 1
Replies
13
Views
176
Borvik
Borvik
1DMF
  • Locked
  • Question
Can't select element following a parent of a child having a psuedo class
Replies
3
Views
134
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top