Solved

If checkbox has certain value, show div

Posted on 2007-03-27
11
387 Views
Last Modified: 2012-08-13
I want javascript to check to see if a checkbox is marked as a certain value; if it does, a div would display as "block". If not, it would display as "hidden". In this example,"oForm" is the form name,  "alumn" is the div that is shown or hidden, "affiliation" is the input (checkbox), and it's marked [0] because it's the first of six boxes with "affiliation" as the value.

So, here's the script that doesn't work:

<script language="javascript">
function checkAlumni() {
  document.getElementById("alumn").style.display = (document.oForm.affiliation[0].checked)?"block":"none";
}
</script>

And here's the call:

<body onload="checkAlumni()">

Any thoughts as to what's going wrong? Thanks!
0
Comment
Question by:sholmstedt
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +2
11 Comments
 
LVL 7

Expert Comment

by:RealSnaD
ID: 18801417
Change your function to this:

function checkAlumni() {
   document.getElementById("alumn").style.display =    document.oForm.affiliation.checked)?"block":"none";
}
0
 
LVL 7

Accepted Solution

by:
RealSnaD earned 32 total points
ID: 18801420
This I mean:

      function checkAlumni() {
            document.getElementById("alumn").style.display = (document.oForm.affiliation.checked)?"block":"none";
      }
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 18801428
You don't need that [0] after affiliation.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 31 total points
ID: 18801452
Let's see the html for the form and checkbox.  Also, the html for the element with the id "alumn".  You can put an alert in that function but I think it is getting called.  The problem is probably somewhere else.

I normally recommend you "show" something by just deleting the none value.  For example ...

  document.getElementById("alumn").style.display = (document.oForm.affiliation[0].checked)? "":"none";

Are you getting a javascript error?  Is the div being hidden, shown or neither (i.e. depending on checkbox)?  Let me know if you have a question or need more information.

bol
0
 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 31 total points
ID: 18806108
try changing oForm to forms[0] on your JavaScript statement.

<html>
<head>
<script language="javascript" type="text/javascript">
function checkAlumni() {
  document.getElementById("alumn").style.display = (document.forms[0].affiliation[0].checked)?"block":"none";
}
</script>
</head>
<body onload="checkAlumni()">
      <form id="oForm">
            <input type="checkbox" id="affiliation" checked="checked" /> affiliation 1<br />
            <input type="checkbox" id="affiliation" /> affiliation 2<br />
            <input type="checkbox" id="affiliation" /> affiliation 3<br />
            <input type="checkbox" id="affiliation" /> affiliation 4<br />
            <input type="checkbox" id="affiliation" /> affiliation 5<br />
            <input type="checkbox" id="affiliation" /> affiliation 6<br />
      </form>
      <div id="alumn">
            content of alumn
      </div>
</body>
</html>

Worked for me on both IE7 and FF2

document.getElementById("oForm") will also work (my favorite)
  document.getElementById("alumn").style.display = (document.getElementById("oForm").affiliation[0].checked)?"block":"none";

Hope this helps
0
 
LVL 2

Assisted Solution

by:vjc2003
vjc2003 earned 31 total points
ID: 18822834
script looks OK.
you may  need to call checkAlumni() on onpropertychange of checkbox
if you want to switch visibility when you check or uncheck.
0
 
LVL 2

Expert Comment

by:vjc2003
ID: 18822844
script looks OK.
you may  need to call checkAlumni() on onpropertychange of checkbox
if you want to switch visibility when you check or uncheck.
0
 

Author Comment

by:sholmstedt
ID: 18824093
Sorry all, I've been putting out a huge fire on another project. I will test these today. Thanks for your help.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18824339
The onpropertchange is proprietary to IE and will have poor, if any support, in other browsers.  The onclick event is better (universally supported) if you wish to not be limited to IE.

bol
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 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