If checkbox = checked show dropdown menu

JavaScript
1

Hi,

I was wondering if someone could help me out with a small piece of javascript…

What i wanna achieve:
I want a dropdown menu to become ‘visible’ when a checkbox has been checked,… and here’s the key, i want it to become visible imidiately, not when a form has been submitted…

Can anyone help me out with this one?
Thanks!
deleeuw.

so NOT something like:


<script type="text/javascript">
function DoTheCheck() {
if(document.myform.box1.checked == true)
  { alert('box1 is checked'); }
if(document.myform.box1.checked == false)
  { alert('box1 is not checked'); }
if(document.myform.box2.checked == true)
  { alert('box2 is checked'); }
if(document.myform.box2.checked == false)
  { alert('box2 is not checked'); }
}
</script>

<form name="myform" method="POST" action="#">
<input type="checkbox" name="box1" value="yes1">
<input type="checkbox" name="box2" value="yes2">
<input type="submit" onClick="DoTheCheck()">
</form>
2 
<label for="platypus">Are you a platypus?</label>
<input id="platypus" type="checkbox" name="monotreme" value="platypus" />
  <select name="answer" id="answer">
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>

javascript to put in the <head>:

window.onload = function() {
  var c = document.getElementById('platypus')
  c.onchange = function() {
    if (c.checked == true) {document.getElementById('answer').style.display = 'inline';}
    else {document.getElementById('answer').style.display = '';
    }
  }
}

CSS:

#answer {display:none;}

The dropdown will go away when you unselect the checkbox.

3

Exactly what i was looking for :D! Thanks…

One more thing, this works perfectly in FF, but it has some issues in IE6 (didnt check 7),… can you try making it work for IE6 also?

Thanks in advance!
Later!
deleeuw.

4

Hmm, it didn’t occur to me to check in IE6. IE6 doesn’t seem to like the onchange bit, probably because there’s only one checkbox. Use this javascript instead:

window.onload = function() {
  var c = document.getElementById('platypus');
  c.onclick = function() {
    if (c.checked == true) {document.getElementById('answer').style.display = 'inline';}
    else {document.getElementById('answer').style.display = '';
    }
  }
}
5

Yep thats it :wink: Thanks!

6

I had another question:

Can you make this script work when 2 radio buttons are used, instead of a checkbox,…

So the unselected radio doesnt show any other option, while the selected radio box shows a dropdown menu… Ofcourser when the other radiobox is selected it reacts the same, the previous selected radiobox doesn’t show anything else, while the selected one now does show a dropdown menu.

7

for those who are interrested…


<script type="text/javascript">
window.onload = function() {
  var c = document.getElementById('platypus1');
  var d = document.getElementById('platypus2');
  c.onclick = function() {
    if (c.value == "platypus1") {
	document.getElementById('answer1').style.display = 'inline';
	document.getElementById('answer2').style.display = '';
	}
  }

  d.onclick = function() {
    if (d.value == "platypus2") {
	document.getElementById('answer2').style.display = 'inline';
	document.getElementById('answer1').style.display = '';
	}
  }
}
</script>

<style type="text/css">
#answer1 {display:none;}
#answer2 {display:none;}
</style>

<label for="platypus1">Are you a platypus?</label>
<input id="platypus1" type="radio" name="monotreme" value="platypus1" />
  <select name="answer" id="answer1">
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
<label for="platypus2">Are you a platypus?</label>
<input id="platypus2" type="radio" name="monotreme" value="platypus2" />
  <select name="answer" id="answer2">
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>