Solved

tick/untick all check boxes

Posted on 2003-11-09
17
1,421 Views
Last Modified: 2008-02-01
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>
0
Comment
Question by:ChenChen
  • 8
  • 4
  • 3
  • +1
17 Comments
 
LVL 25

Expert Comment

by:James Rodgers
Comment Utility
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
 
LVL 25

Expert Comment

by:James Rodgers
Comment Utility
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
 
LVL 25

Accepted Solution

by:
devic earned 125 total points
Comment Utility
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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
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
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
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
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 25

Expert Comment

by:devic
Comment Utility
NetGroove, i like you solution!
0
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
Thanks.  :-)
0
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
And that's life <|:-)
0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
> 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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
I surely will not use your version, I can write my own.
0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
>  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
 
LVL 25

Expert Comment

by:devic
Comment Utility
@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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
Why are you asking? Do you need some help?
0
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
Thanks devic. That's the only useful comment here :-)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

744 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