Forum Moderators: open
On my site I have a page with 5 checkboxes.
Whenever a checkbox is checked, I would like an input field to appear below that particular checkbox. If I remove the checkmark in that checkbox, the input field would have to dissappear.
Could you please help me out with a javascript, css or ajax code that can accomplish this task?
Thanks in advance.
Hope the following code is helpful to you.
<html>
<head>
<title>Check Box</title>
<style type="text/css">
.hide {
display: None;
}
</style>
<script language="JavaScript">
function showhide(val)
{
var checkbox="chk"+val;
var d="div"+val;
if(document.getElementById(checkbox).checked==true)
{
document.getElementById(d).style.display="block";
}
else
{
document.getElementById(d).style.display="none";
}
}
</script>
</head>
<body>
<?php
for($i=1;$i<=5;$i++)
{
?>
<input type="checkbox" name="chk<?php echo $i;?>" id="chk<?php echo $i;?>" onClick="showhide(<?php echo $i;?>);"> CheckBox <?php echo $i;?><br/>
<div id="div<?php echo $i;?>" class="hide">
<input type="text" name="text<?php echo $i;?>">
</div>
<?php
}
?>
</body>
</html>
If you don't want to use PHP you have to write the HTML code for Check Boxes, DIVs and Text Fields 5 times. Be careful about the names and IDs.
It works just fine!
