Showing hiding a list when a checkbox is clicked?

Discussion in 'Javascript' started by Cheddar, Apr 15, 2004.

  1. Cheddar

    Cheddar Guest

    I'm back again with another problem.

    What I want is for the user to click a checkbox and have a
    list appear. I think the code is almost there but it doesnt
    seem to be working, grrrr. Can anyone help me out with it.

    Also is there a initial way to hide a list when the page is
    loaded?

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    </head>

    <script LANGUAGE="JavaScript">
    function elemDisplayToggle (elemID) {
    if ( document.getElementById( elemID ).style.display ==
    'none' ) {
    document.getElementById( elemID ).style.display =
    'block';
    }
    else {
    document.getElementById( elemID ).style.display =
    'none';
    }
    }
    </script>

    <body>
    <input type="checkbox" name="box1"
    onclick="elemDisplayToggle(choices)" value="checkbox">
    <select name="choices">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </body>
    </html>

    Thanks
    Cheddar, Apr 15, 2004
    #1
    1. Advertising

  2. Cheddar

    Geoff Tucker Guest

    "Cheddar" <> wrote in message
    news:c5ll1u$36hee$-berlin.de...
    > I'm back again with another problem.
    >
    > What I want is for the user to click a checkbox and have a
    > list appear. I think the code is almost there but it doesnt
    > seem to be working, grrrr. Can anyone help me out with it.
    >
    > Also is there a initial way to hide a list when the page is
    > loaded?
    >
    > <html>
    > <head>
    > <title>Untitled Document</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > </head>
    >
    > <script LANGUAGE="JavaScript">
    > function elemDisplayToggle (elemID) {
    > if ( document.getElementById( elemID ).style.display ==
    > 'none' ) {
    > document.getElementById( elemID ).style.display =
    > 'block';
    > }
    > else {
    > document.getElementById( elemID ).style.display =
    > 'none';
    > }
    > }
    > </script>
    >
    > <body>
    > <input type="checkbox" name="box1"
    > onclick="elemDisplayToggle(choices)" value="checkbox">
    > <select name="choices">
    > <option value="1">1</option>
    > <option value="2">2</option>
    > <option value="3">3</option>
    > <option value="4">4</option>
    > </select>
    > </body>
    > </html>
    >
    > Thanks
    >


    The function's parameter in your onclick event should be passed as a
    string - onclick="elemDisplayToggle('choices')"

    To initially hide the select element - <select name="choices"
    style="display:none">

    Hope this helps
    Geoff
    Geoff Tucker, Apr 15, 2004
    #2
    1. Advertising

  3. Cheddar

    Cheddar Guest

    Geoff Tucker wrote:
    >parameter in your onclick event should be passed as a
    > string - onclick="elemDisplayToggle('choices')"
    >
    > To initially hide the select element - <select

    name="choices"
    > style="display:none">
    >
    > Hope this helps
    > Geoff


    Thanks for the help Geoff, I got it to work but decided it
    looked pretty awful, having lists just appear looks very
    dodgy.

    I have now decided to try to simply enable/disable a select
    list on the click of a checkbox. I have got it to work but I
    cannot get the list to reset. Ideally if a user clicks the
    box and selects a option and then changes their mind and
    clicks the checkbox to disable their choice then the list
    should reset itself to it's standard value (option 1 in this
    case).

    Any ideas of how I would do this?

    Thanks.

    ------------------------------------------------------------
    ------

    <script language="JavaScript" type="text/javascript">
    <!--
    function toggleSelect (select) {
    if (!select.disabled) {
    select.disabled = true;
    }
    else {
    select.disabled = false;
    }
    }
    //-->
    </script>
    </head>
    <body>

    <input type="checkbox" name="box1"
    onclick="toggleSelect(choices);">
    <select id="choices" disabled="true">

    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </div>
    </body>
    </html>
    Cheddar, Apr 15, 2004
    #3
  4. JRS: In article <c5ms0h$3gbcc$-berlin.de>, seen in
    news:comp.lang.javascript, Cheddar <>
    posted at Thu, 15 Apr 2004 21:40:42 :

    >function toggleSelect (select) {
    >if (!select.disabled) {
    >select.disabled = true;
    >}
    >else {
    >select.disabled = false;
    >}
    >}


    Naive.

    function toggleSelect (select) { select.disabled = !select.disabled }

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Apr 16, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?RG90TmV0RGV2?=

    DataGrid and embeded Checkbox..How to find if checkbox clicked

    =?Utf-8?B?RG90TmV0RGV2?=, Oct 6, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    779
    David Wier
    Oct 6, 2006
  2. Joey Pang
    Replies:
    4
    Views:
    492
    Joey Pang
    Jun 13, 2005
  3. Nigel Molesworth

    Showing hidden answer when question clicked?

    Nigel Molesworth, Jun 13, 2005, in forum: Javascript
    Replies:
    4
    Views:
    91
  4. Jon
    Replies:
    2
    Views:
    61
  5. Ste
    Replies:
    41
    Views:
    783
    Thomas 'PointedEars' Lahn
    Aug 1, 2007
Loading...

Share This Page