PDA

View Full Version : Java script in HTML forms



gemzilla
06-21-2012, 10:11 AM
I have this code which consists of a check box and when a user checks it some radio buttons pop down. I would like it so that when they un check it removes in checked radio buttons and then makes the radio buttons dissapear.

This is the code I have a the moment:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/*<![CDATA[*/

.answer {
overflow:hidden;display:none;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcShow(id,closelast){
var obj=document.getElementById(id);;
if (closelast&&zxcShow.lst){
zxcShow.lst.style.display='none';

}
obj.style.display='block';
zxcShow.lst=obj;
}


/*]]>*/
</script>

</head>

<body>
<table width="166" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="166" valign="top"><span class="Text">
<input name="Question" type="checkbox" id="question" value="Question" onmouseup="zxcShow('b2',true);" />
Question
</span></td>
</tr>
<tr>
<td height="19" valign="top">

<div id='b2' class="answer">
<p><strong>I hold:</strong></p>
<p>Answer 1
<input type="radio" name="radio" id="answer1" value="Answer 1" />
</p>
<p>Answer 2
<input type="radio" name="radio" id="answer2" value="Answer 2" />
</p>
<p>Answer 3
<input type="radio" name="radio" id="answer3" value="Answer 3" />
</p>
</div></td>
</tr>
</table>
</body>
</html>

vwphillips
06-21-2012, 11:34 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/*<![CDATA[*/

.answer {
overflow:hidden;display:none;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcShow(cb,id){
var obj=document.getElementById(id);;
obj.style.display=cb.checked?'block':'none';
cb.style.display=cb.checked?'block':'none';
}


/*]]>*/
</script>

</head>

<body>
<table width="166" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="166" valign="top"><span class="Text">
<input name="Question" type="checkbox" id="question" value="Question" onclick="zxcShow(this,'b2');" />
Question
</span></td>
</tr>
<tr>
<td height="19" valign="top">

<div id='b2' class="answer">
<p><strong>I hold:</strong></p>
<p>Answer 1
<input type="radio" name="radio" id="answer1" value="Answer 1" />
</p>
<p>Answer 2
<input type="radio" name="radio" id="answer2" value="Answer 2" />
</p>
<p>Answer 3
<input type="radio" name="radio" id="answer3" value="Answer 3" />
</p>
</div></td>
</tr>
</table>
</body>
</html>