Solved

If checkbox has certain value, show div

Posted on 2007-03-27
11
384 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

756 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