Link to home
Start Free TrialLog in
Avatar of ChenChen
ChenChenFlag for Afghanistan

asked on

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>
Avatar of James Rodgers
James Rodgers
Flag of Canada image
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>
Avatar of James Rodgers
James Rodgers
Flag of Canada image
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
ASKER CERTIFIED SOLUTION
Avatar of devic
devic
Flag of Germany image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of NetGroove
NetGroove
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>



Avatar of Zontar
Zontar
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?
Avatar of NetGroove
NetGroove
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>




Avatar of Zontar
Zontar
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.
Avatar of NetGroove
NetGroove
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>


Avatar of devic
devic
Flag of Germany image
NetGroove, i like you solution!
Avatar of NetGroove
NetGroove
Thanks.  :-)
Avatar of NetGroove
NetGroove
And that's life <|:-)
Avatar of Zontar
Zontar
> 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.
Avatar of NetGroove
NetGroove
I surely will not use your version, I can write my own.
Avatar of Zontar
Zontar
>  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?
Avatar of devic
devic
Flag of Germany image
@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>
Avatar of NetGroove
NetGroove
Why are you asking? Do you need some help?
Avatar of NetGroove
NetGroove
Thanks devic. That's the only useful comment here :-)