Solved

If checkbox has certain value, show div

Posted on 2007-03-27
11
395 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
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…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

615 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