Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Showing hiding a list when a checkbox is clicked?

Reply
Thread Tools

Showing hiding a list when a checkbox is clicked?

 
 
Cheddar
Guest
Posts: n/a
 
      04-15-2004
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


 
Reply With Quote
 
 
 
 
Geoff Tucker
Guest
Posts: n/a
 
      04-15-2004

"Cheddar" <(E-Mail Removed)> wrote in message
news:c5ll1u$36hee$(E-Mail Removed)-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




 
Reply With Quote
 
 
 
 
Cheddar
Guest
Posts: n/a
 
      04-15-2004
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>


 
Reply With Quote
 
Dr John Stockton
Guest
Posts: n/a
 
      04-16-2004
JRS: In article <c5ms0h$3gbcc$(E-Mail Removed)-berlin.de>, seen in
news:comp.lang.javascript, Cheddar <(E-Mail Removed)>
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Script for Hiding/Un-Hiding Text On Click Ste Javascript 41 08-01-2007 02:35 PM
disable checkbox list checkbox Vikram ASP .Net 1 01-25-2006 02:59 PM
dynamic hiding/showing of template column beccak ASP .Net 4 06-09-2004 01:44 AM
Hiding and Showing Columns in the DataGrid Control... Amber ASP .Net 1 10-11-2003 07:17 PM
Hiding and Showing User Control Dynamically John Kraft ASP .Net 1 08-15-2003 07:24 PM



Advertisments