Solved

If checkbox has certain value, show div

Posted on 2007-03-27
11
372 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
  • 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

867 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

13 Experts available now in Live!

Get 1:1 Help Now