SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    if checkbox = checked show dropdown menu

    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:
    Code:
    <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. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <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>:
    Code:
    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:
    Code:
    #answer {display:none;}
    The dropdown will go away when you unselect the checkbox.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly what i was looking for ! 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. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep thats it Thanks!

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for those who are interrested...

    Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •