469,963 Members | 1,885 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,963 developers. It's quick & easy.

Showing hiding a list when a checkbox is clicked?

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
Jul 23 '05 #1
3 1694

"Cheddar" <my*************@dsl.pipex.com> wrote in message
news:c5************@ID-179732.news.uni-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


Jul 23 '05 #2
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>
Jul 23 '05 #3
JRS: In article <c5************@ID-179732.news.uni-berlin.de>, seen in
news:comp.lang.javascript, Cheddar <my*************@dsl.pipex.com>
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.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by luvdairish | last post: by
6 posts views Thread by luvdairish | last post: by
reply views Thread by Steven | last post: by
1 post views Thread by adam | last post: by
1 post views Thread by mschoup | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.