Solved

CheckBox Value - Unchecked?

Posted on 2003-11-04
5
7,449 Views
Last Modified: 2008-03-06
I am trying to get an element to change when a checkbox is checked or unchedcked. I am not sure how to read or get the value of an unchecked checkbox. I can get the results I want when the checkbox is checked, but not unchecked. When the checkbox is unchecked, nothing happens.

Here is the code I am currently playing with:


  <html>
  <head>
  <title>Test Document</title>
 
   <script language="JavaScript" defer="true">
     
       function TestCKBox()
       {
        if(TestForm.TheCheckBox.value == "True")
        {
         TestDataVal.style.display = "";
        }
        else
        {
         TestDataVal.style.display = "none";
        }
       }

   </script>
  <body>

  <form name="TestForm">
  <input type="checkbox" name="TheCheckBox" value="True" onclick="JavaScript:TestCKBox()">The CheckBox
  </form>
  <div id="TestDataVal" style="display:none;">TEST</div>

  </body>
  </html>
0
Comment
Question by:swinslow
  • 2
  • 2
5 Comments
 
LVL 58

Accepted Solution

by:
amit_g earned 150 total points
ID: 9681656
Use checkbox.checked attribute ...

       function TestCKBox()
       {
        if(TestForm.TheCheckBox.checked)
        {
         document.getElementById("TestDataVal").style.display = "block";
        }
        else
        {
         document.getElementById("TestDataVal").style.display = "none";
        }
       }

also use document.getElementById instead of directly accessing the div element.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9681669
<html>
 <head>
 <title>Test Document</title>
 
  <script language="JavaScript" defer="true">
       function TestCKBox(fObj,theDiv){
            var el = document.getElementById(theDiv);
        if(fObj.checked == true){
                  el.style.display = "";
            } else {
                  el.style.display = "none";
            }
      }
  </script>
 <body>

 <form name="TestForm">
 <input type="checkbox" name="TheCheckBox" value="True" onclick="TestCKBox(this,'TestDataVal')">The CheckBox
 </form>
 <div id="TestDataVal" style="display:none;">TEST</div>

 </body>
 </html>
0
 
LVL 4

Author Comment

by:swinslow
ID: 9681727
amit_g - Thank you very much! That works perfect.

Soren

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9681760
swinslow

It does not work in Netscape as mine does.

you will need to modify it to work for NS

0
 
LVL 4

Author Comment

by:swinslow
ID: 9682687
Doesnt matter much about Netscape in this application. It for an intranet web site, and Netscape has been permanently banned for a couple years.

Thanks anyway. I will remember that if I need it for one of our internet sites.

Soren

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Sums of coloumns in html/java 15 67
Randomize in Owl Carousel v1.3.2 6 20
Recordset containing single quotes 8 23
How can i get the length? 7 14
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-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

920 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