Solved

If checkbox has certain value, show div

Posted on 2007-03-27
11
367 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
Comment Utility
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
Comment Utility
This I mean:

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

Expert Comment

by:RealSnaD
Comment Utility
You don't need that [0] after affiliation.
0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 31 total points
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 31 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

743 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

18 Experts available now in Live!

Get 1:1 Help Now