tick/untick all check boxes

I've got a html like this:

And please help here    ---------------------------------------------------------------------------
                                                                                                                                  |
<html>                                                                                                                       |
<head>                                                                                                                      |
</head>                                                                                                                     |
                                                                                                                                   |
<body>                                                                                                                       |
      <div>Question 1</div>                                                                               |
      <span id="sp1">                                                                                        V
      <input type="button" value="tick/untick all"/><br/> //please help here, to make it tick/untick all check boxes under this <span>
      <input type="checkbox"/>check 1<br/>
      <input type="checkbox"/>check 2<br/>
      <input type="checkbox"/>check 3<br/>
      </span>
      <div>Question 2</div>
      <span id="sp2">
      <input type="button" value="tick/untick all"/><br/> //please help here, to make it tick/untick all check boxes under this <span>
      <input type="checkbox"/>check 1<br/>
      <input type="checkbox"/>check 2<br/>
      <input type="checkbox"/>check 3<br/>
      <input type="checkbox"/>check 4<br/>
      </span>
</body>
</html>
LVL 4
ChenChenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

James RodgersWeb Applications DeveloperCommented:
try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
      
<script>      
var bCheck=true;
function tickAll(){
             for(var x=0;x<document.junk.elements.length;x++){
                if(document.junk.elements[x].type=="checkbox"){
                               document.junk.elements[x].checked=bCheck;
            }
         }
bCheck= !bCheck;
document.getElementById("checkAll").value="Uncheck All";
}
</script>
</head>
                                                                                                                     
                                                                                                                                 
<body>
        <form name="junk">                                                                                                                      
     <div>Question 1</div>                                                                              
     <span id="sp1">                                                                                        
     <input id="checkAll" type="button" value="Check All" onClick="tickAll()"/><br/>
     <input type="checkbox"/>check 1<br/>
     <input type="checkbox"/>check 2<br/>
     <input type="checkbox"/>check 3<br/>
     </span>
     <div>Question 2</div>
     <span id="sp2">
     <input type="button" value="tick/untick all"/><br/>
     <input type="checkbox"/>check 1<br/>
     <input type="checkbox"/>check 2<br/>
     <input type="checkbox"/>check 3<br/>
     <input type="checkbox"/>check 4<br/>
     </span>
       </form>
</body>
</html>


</body>
</html>
0
James RodgersWeb Applications DeveloperCommented:
one problem tho is tthat you will either need to limit the check boxes on the page or come up with some kind of identifier for the boxes you need to have checked
0
devicCommented:
hi ChenChen,
here:
==============================
<html>                                                                                                                      
<head>  
<script>
function tickUntick(thisid)
{
      var inputs=document.getElementsByTagName("input");
      for(var i=0;i<inputs.length;i++)
      {
            if(inputs[i].type=="checkbox" && inputs[i].parentNode.id==thisid)
            {
                  inputs[i].checked=inputs[i].checked?false:true;
            }
      }
}
</script>
</head>                                                                                                                    
                                                                                                                                   
<body>                                                                                                                      
     <div>Question 1</div>                                                                              
     <span id="sp1">                                                                                        
    <input type="button" onclick=tickUntick("sp1") value="tick/untick all"/><br/> //please help here, to make it tick/untick all check boxes under this <br>
    <input type="checkbox"/>check 1<br/>
    <input type="checkbox"/>check 2<br/>
    <input type="checkbox"/>check 3<br/>
    </span>
    <div>Question 2</div>
    <span id="sp2">
    <input type="button" onclick=tickUntick("sp2") value="tick/untick all"/><br/> //please help here, to make it tick/untick all check boxes under this <br>
    <input type="checkbox"/>check 1<br/>
    <input type="checkbox"/>check 2<br/>
    <input type="checkbox"/>check 3<br/>
    <input type="checkbox"/>check 4<br/>
    </span>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

NetGrooveCommented:
Here my version:


<html>          
<head>          
<script>
function uTick(theButton){
  spChild = theButton.parentNode.childNodes;
  theButton.bxState = bxState = (theButton.bxState!=true)?true:false;
  for(i=0;i<spChild.length;i++){
    if(spChild[i].type=="checkbox"){
      spChild[i].checked = bxState;
    }
  }
}
</script>
</head>          
<body>
     <div>Question 1</div>  
     <span id="sp1">      
    <input type="button" value="tick/untick all" onClick="uTick(this)"/><br/>
    <input type="checkbox"/>check 1<br/>
    <input type="checkbox"/>check 2<br/>
    <input type="checkbox"/>check 3<br/>
    </span>
    <div>Question 2</div>
    <span id="sp2">
    <input type="button" value="tick/untick all" onClick="uTick(this)"/><br/>
    <input type="checkbox"/>check 1<br/>
    <input type="checkbox"/>check 2<br/>
    <input type="checkbox"/>check 3<br/>
    <input type="checkbox"/>check 4<br/>
    </span>
</body>
</html>



0
ZontarCommented:
Two things need to be done first:

1. You need to place all of your form controls inside a form.

2. They should be named.

Let's take care of these things. Also, because it's possible for the user to check some of the checkboxes, but not others, it's probably better to have a separate button for each function (otherwise, how can you tell what the user's intention was?).
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
</style>

<script type="text/javascript">
function checkAll(chName)
{
  var form = document.myForm;
  var chBoxes = form[chName];

  for(var i = 0; i < chBoxes.length; i++)
    chBoxes[i].checked = true;
}

function uncheckAll(chName)
{
  var form = document.myForm;
  var chBoxes = form[chName];

  for(var i = 0; i < chBoxes.length; i++)
    chBoxes[i].checked = false;
}
</script>

</head>
<body>

<form name="myForm" action="somepage.php">
  <div>Question 1</div>
  <span id="sp1">
    <input type="button" value="check all" onclick="checkAll('a1');"><input type="button" value="uncheck all" onclick="uncheckAll('a1');"><br>
    <input name="a1" type="checkbox">check 1<br>
    <input name="a1" type="checkbox">check 2<br>
    <input name="a1" type="checkbox">check 3<br>
  </span>
  <div>Question 2</div>
  <span id="sp2">
    <input type="button" value="check all" onclick="checkAll('a2');"><input type="button" value="uncheck all" onclick="uncheckAll('a2');"><br>
    <input name="a2" type="checkbox"/>check 1<br>
    <input name="a2" type="checkbox"/>check 2<br>
    <input name="a2" type="checkbox"/>check 3<br>
    <input name="a2" type="checkbox"/>check 4<br>
  </span>
</form>
</body>
</html>

Now, since you asked basically for a couple of toggle checked/unchecked buttons, I guess I'd better supply those as well:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
</style>

<script type="text/javascript">
function toggleAll(button, chName)
{
  var form = document.myForm;
  var chBoxes = form[chName];
  if(button.value == "check all")
  {
    for(var i = 0; i < chBoxes.length; i++)
      chBoxes[i].checked = true;
    button.value = "uncheck all";
  }
  else
  {
    for(var i = 0; i < chBoxes.length; i++)
      chBoxes[i].checked = false;
    button.value = "check all";
  }  
}
</script>

</head>
<body>

<form name="myForm" action="somepage.php">
  <div>Question 1</div>
  <span id="sp1">
    <input type="button" value="check all" onclick="toggleAll(this,'a1');"><br>
    <input name="a1" type="checkbox">check 1<br>
    <input name="a1" type="checkbox">check 2<br>
    <input name="a1" type="checkbox">check 3<br>
  </span>
  <div>Question 2</div>
  <span id="sp2">
    <input type="button" value="check all" onclick="toggleAll(this,'a2');"><br>
    <input name="a2" type="checkbox"/>check 1<br>
    <input name="a2" type="checkbox"/>check 2<br>
    <input name="a2" type="checkbox"/>check 3<br>
    <input name="a2" type="checkbox"/>check 4<br>
  </span>
</form>
</body>
</html>


One of these what you were looking for?
0
NetGrooveCommented:
Ok, with form:

<html>          
<head>          
<script>
function uTick(theButton){
  spChild = theButton.parentNode.childNodes;
  theButton.bxState = bxState = (theButton.bxState!=true)?true:false;
  for(i=0;i<spChild.length;i++){
    if(spChild[i].type=="checkbox"){
      spChild[i].checked = bxState;
    }
  }
}
</script>
</head>          
<body>
<form>
     <div>Question 1</div>  
     <span id="sp1">      
    <input type="button" value="tick/untick all" onClick="uTick(this)"/><br/>
    <input type="checkbox"/>check 1<br/>
    <input type="checkbox"/>check 2<br/>
    <input type="checkbox"/>check 3<br/>
    </span>
    <div>Question 2</div>
    <span id="sp2">
    <input type="button" value="tick/untick all" onClick="uTick(this)"/><br/>
    <input type="checkbox"/>check 1<br/>
    <input type="checkbox"/>check 2<br/>
    <input type="checkbox"/>check 3<br/>
    <input type="checkbox"/>check 4<br/>
    </span>
</form>
</body>




0
ZontarCommented:
In order to be submitted successfully to a form processing script on the server, a form control must

(a) be in a form

(b) have a name attribute

Also, some older browsers (most notably our old friend Netscape 4)  will not display form controls that aren't in a form.
0
NetGrooveCommented:
Now also with names:

<html>          
<head>          
<script>
function uTick(theButton){
  spChild = theButton.parentNode.childNodes;
  theButton.bxState = bxState = (theButton.bxState!=true)?true:false;
  for(i=0;i<spChild.length;i++){
    if(spChild[i].type=="checkbox"){
      spChild[i].checked = bxState;
    }
  }
}
</script>
</head>          
<body>
<form>
     <div>Question 1</div>  
     <span id="sp1">      
    <input type="button" value="tick/untick all" onClick="uTick(this)"/><br/>
    <input type="checkbox" name="c11" />check 1<br/>
    <input type="checkbox" name="c12" />check 2<br/>
    <input type="checkbox" name="c13" />check 3<br/>
    </span>
    <div>Question 2</div>
    <span id="sp2">
    <input type="button" value="tick/untick all" onClick="uTick(this)"/><br/>
    <input type="checkbox" name="c21" />check 1<br/>
    <input type="checkbox" name="c22" />check 2<br/>
    <input type="checkbox" name="c23" />check 3<br/>
    <input type="checkbox" name="c24" />check 4<br/>
    </span>
<input type="submit">
</form>
</body>
</html>


0
devicCommented:
NetGroove, i like you solution!
0
NetGrooveCommented:
Thanks.  :-)
0
NetGrooveCommented:
And that's life <|:-)
0
ZontarCommented:
> spChild = theButton.parentNode.childNodes;

I thought about doing that, but since I've caught some flak for not using the Stone Age forms and forms elements collections, I thought I'd be nicely backwards compatible.

Also you'll notice that the toggle buttons in my version change so that the user knows if the button will check or uncheck everything. I hate filling out online forms where they have a toggle but it doesn't tell you which it will do -- annoying.
0
NetGrooveCommented:
I surely will not use your version, I can write my own.
0
ZontarCommented:
>  I surely will not use your version, I can write my own.

That's cool, since I didn't ask you to. What's your damage, anyway?
0
devicCommented:
@NetGroove,
 
at most i like that you has stuck new property to the Button object.
very nice!

@Zontar,
to change button name in NetGroove's version is easy:

i think we need to smoke the pipe of peace =)
=======================
<html>          
<head>          
<script>
function uTick(theButton){
 spChild = theButton.parentNode.childNodes;
 theButton.bxState = bxState = (theButton.bxState!=true)?true:false;
 for(i=0;i<spChild.length;i++){
   if(spChild[i].type=="checkbox"){
     spChild[i].checked = bxState;
     theButton.value=bxState?"untick all":"tick all";
   }
 }
}
</script>
</head>          
<body>
<form>
    <div>Question 1</div>  
    <span id="sp1">      
   <input type="button" value="tick all" onClick="uTick(this)" style=width:100px;/><br/>
   <input type="checkbox"/>check 1<br/>
   <input type="checkbox"/>check 2<br/>
   <input type="checkbox"/>check 3<br/>
   </span>
   <div>Question 2</div>
   <span id="sp2">
   <input type="button" value="tick all" onClick="uTick(this)" style=width:100px;/><br/>
    <input type="checkbox"/>check 1<br/>
   <input type="checkbox"/>check 2<br/>
   <input type="checkbox"/>check 3<br/>
   <input type="checkbox"/>check 4<br/>
   </span>
</form>
</body>
0
NetGrooveCommented:
Why are you asking? Do you need some help?
0
NetGrooveCommented:
Thanks devic. That's the only useful comment here :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.