Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Hide/Show html with a checkbox

    Can anyone give me the script to hide or show html based on a checkbox value? I have a working drop down box but that only allows the users to choose one item. Below is the code I am trying to modify.

    function fnShowForm(){
    switch( document.getElementById('Purchase').selectedIndex ){
    case 0:
    //Hide all others by using the same line below
    //but replace the element name and change inline to none
    document.getElementById('CellPhone').style.display = 'none';
    document.getElementById('Desktop').style.display = 'none';
    document.getElementById('Laptop').style.display = 'none';
    document.getElementById('Software/Accessories').style.display = 'none';
    break;
    case 1:
    document.getElementById('CellPhone').style.display = 'inline';
    document.getElementById('Desktop').style.display = 'none';
    document.getElementById('Laptop').style.display = 'none';
    document.getElementById('Software/Accessories').style.display = 'none';
    break;
    case 2:
    document.getElementById('CellPhone').style.display = 'none';
    document.getElementById('Desktop').style.display = 'inline';
    document.getElementById('Laptop').style.display = 'none';
    document.getElementById('Software/Accessories').style.display = 'none';
    break;
    case 3:
    document.getElementById('CellPhone').style.display = 'none';
    document.getElementById('Desktop').style.display = 'none';
    document.getElementById('Laptop').style.display = 'inline';
    document.getElementById('Software/Accessories').style.display = 'none';
    break;
    case 4:
    document.getElementById('CellPhone').style.display = 'none';
    document.getElementById('Desktop').style.display = 'none';
    document.getElementById('Laptop').style.display = 'none';
    document.getElementById('Software/Accessories').style.display = 'inline';
    break;

    }

    Thanks,
    Dan

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    See if this is any good for you.

    I have used radio buttons because I thought that if you only want to select one out of a choice then these are what you use.

    Checkboxes allow for mulitple choice



    <SCRIPT language="JavaScript">
    <!--
    mess=new Array()
    mess[mess.length]=" hi there"
    mess[mess.length]=" here is an example"
    mess[mess.length]=" nice weather"
    mess[mess.length]=" hey... that hurt"
    mess[mess.length]=" Sorry"

    radbox= new Array()

    function Hmm(){
    for (i = 0; i < document.f1.length; i++) {
    if (document.f1[i].type == "radio"){
    radbox[i]=i
    if(document.f1.elements[radbox[i]].checked==true){
    display.innerText=mess[i]
    }
    }
    }

    }
    onload=Hmm

    // -->
    </SCRIPT>

    <form name="f1">
    <input type="radio" name="r1" onclick="Hmm()">
    <input type="radio" name="r1" onclick="Hmm()">
    <input type="radio" name="r1" onclick="Hmm()">
    <input type="radio" name="r1" onclick="Hmm()">
    <input type="radio" name="r1" onclick="Hmm()">
    </form>

    <P id="display"></p>



  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Maybe this'll help:

    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">

    function getElement(id) {
    return document.getElementById ? document.getElementById(id) :
    document.all ? document.all(id) : null;
    }

    function showProduct(box) {
    el = getElement(box.value);
    if (el) el.style.display = (box.checked) ? '' : 'none';
    }

    </script>
    </head>
    <body>
    <table>
    <tr>
    <td width="200" height="140">
    <form>
    <input type="checkbox" name="showProd" value="CellPhone"
    onclick="showProduct(this)"> cell phones<br>
    <input type="checkbox" name="showProd" value="Desktop"
    onclick="showProduct(this)"> desktops<br>
    <input type="checkbox" name="showProd" value="Laptop"
    onclick="showProduct(this)"> laptops<br>
    <input type="checkbox" name="toggleProds" value="Software/Accessories"
    onclick="showProduct(this)"> software and accessories<br>
    </form>
    </td><td>
    <img id="CellPhone" align="middle" style="display:none;border:3px silver double;"
    src="http://www.clipartgallery.com/business/cellphone.gif">
    <img id="Desktop" align="middle" style="display:none;border:3px silver double;"
    src="http://www.dell.com/images/us/segments/dhs/prodviews/dimen_2300_series.jpg">
    <img id="Laptop" align="middle" style="display:none;border:3px silver double;"
    src="http://www.dell.com/images/us/segments/dhs/prodviews/x200_series.jpg">
    <img id="Software/Accessories" align="middle" style="display:none;border:3px silver double;"
    src="http://www.compusa.com/product_images/images/small/94/286294.gif">
    </td></tr></table>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks adios!!!

    Your script worked just fine, works great for my company order form!


  •  

    Posting Permissions

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