...

View Full Version : to check a checkbox



Keltoi
09-15-2006, 12:53 PM
I am trying to write a very simple bit of script to show or hide a div when a checkbox is checked or unchecked.

Everytime the script seems to lock up, usually not allowing the state of the checkbox to be changed (checked to unchecked or visa versa).

I've tried several ways to perform the task but to no avail.
One of my many attampts:
function logoCost(){
if (document.getElementById('logoPrinting').checked=true){
document.getElementById('logoPrompt').style.display = 'block';
}else{
document.getElementById('logoPrompt').style.display = 'none';
}
}Any ideas? It's rather frustrating me now.

Many thanks

Justin

nikkiH
09-15-2006, 02:35 PM
Full working sample:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function showHideDiv(chkbx, e)
{
var element = document.getElementById?document.getElementById(e):document.all?document.all[e]:document.layers?document.layers[e]:null;
if (element == null) return;

if (!chkbx.checked)
{
if (element.style)
{
element.style.visibility = "visible";
element.style.display = "block";
}
}
else
{
if (element.style)
{
element.style.visibility = "hidden";
element.style.display = "none";
}
}
}
</script>
</head>

<body>
<form name="f1" id="f1">
<input type="checkbox" name="chk1" id="chk1" value="0" onclick="showHideDiv(this, 'div1')">
<div id="div1">hey there, this is a div to be shown or hidden.</div>
<div id="div2">this is a div that is always here</div>
</body>
</html>

Keltoi
09-15-2006, 02:45 PM
Thanks nikkiH,
I had just realised that I missed an = (==) and seems to work now
function logoCost(){
if (document.getElementById('logoPrinting').checked==true){
document.getElementById('logoPrompt').style.display = 'block';
}else{
document.getElementById('logoPrompt').style.display = 'none';
}
}Will try your example though as is more useful...
I will post back shortly....

Bill Posters
09-15-2006, 02:49 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

It is generally advisable to use a complete doctype to help establish better x-browser consistency.

Also, I know it was a quick demo, but you failed to close the form element, although it's worth noting that the checkbox will still function (and validate) perfectly well even without placing it within a form element.
What this means for AT usability/accessibility is open to debate.

- - -

A tighter solution…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">

.unseen {
display: none;
}

</style>
<script type="text/javascript">

function showHideDiv(chkbx, e) {

if (!document.getElementById) return;

var obj = document.getElementById(e);

obj.className = (chkbx.checked) ? 'unseen' : '';

}

</script>
</head>

<body>

<form action="./" name="f1" id="f1">
<div>
<label>
<input type="checkbox" name="chk1" id="chk1" value="0" onclick="showHideDiv(this, 'div1')">
Hide the div?
</label>
</div>
</form>

<div id="div1">hey there, this is a div to be shown or hidden.</div>
<div id="div2">this is a div that is always here</div>

</body>
</html>

I've used embedded js and CSS here, for the sake of simplicity in the demo. I'd normally place both into external files.
However, I've reflected the worthy ideals of separation by not using js to directly manipulate the style property of an element (as NikkiH had done in her example).
Separation means not only keeping js and CSS out of the markup, but also keeping a distance between js and the presentation layer, by using it to alter the markup (e.g. a class attribute value) and then having the consequences of that change stored in the stylesheet, where the details of the presentational info should be kept.

Keltoi
09-15-2006, 04:25 PM
reply to nikkiH's post...
Sorry for the delay,
the visability and display parts of the function seemed to be the wrong way around. All working though.
Seems overly complex, but I'm just a novice programmer in JavaScript so I bow to your superior knowledge.

Many thanks

Justin

Keltoi
09-15-2006, 04:39 PM
Thanks Bill Posters



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum