Show Table if Checkbox is checked

I have a survey form that I've created. I want to know is there a way to show a table (to collect additional information) if a visitor clicks a check box? And if the checkbox is unchecked the table stays hidden

Your help is appreciated.
Jody :rolleyes:

there sure is!!

on the check box, put the following code inside the tag


onchange="check(this)"


so it should look something like


<input type="checkbox" name="xxx" value="xxx" onclick="check(this)">


then put a javascript function such as


function check(ctrl)
{
//get the state of the check box
if (ctrl.checked == true) {
//the box is checked, so show the table
document.all['moreInfo'].style.display = "inline";
} else {
//hide the table
document.all['moreInfo'].style.display = "none";
}
}


then you need to create the table and give it a name called "moreInfo"...eg:


<table border="0" id="moreInfo" style="display:none">
<tr>
<td>Something here</td>
</tr>
</table>


let us know how you get on!

ignore this message!! sorry!!

Thanks that worked perfect! :D

Thanks that worked perfect! :D
no probs.. let us know if u need any modifications etc! good luck.... :thumbsup:

You will need if you want to make it cross-browser.

function check(ctrl)
{
document.getElementById('moreInfo').style.display = (ctrl.checked) ? "":"none";
}

wow... i know this is an old topic - 3 years old to be exact.. but glenngv's piece of code did exactly what i needed.. Thanks man....

I do have a question tho, how would I use it multiple times on 1 page calling a different table each time..

thanks in advance

Use parameters.
function check(tableId, ctrl)
{
document.getElementById(tableId).style.display = (ctrl.checked) ? "":"none";
}
...
<input type="checkbox" name="xxx" value="xxx" onclick="check('moreInfo', this)">
<input type="checkbox" name="yyy" value="yyy" onclick="check('whatever', this)">

Use parameters.
function check(tableId, ctrl)
{
document.getElementById(tableId).style.display = (ctrl.checked) ? "":"none";
}
...
<input type="checkbox" name="xxx" value="xxx" onclick="check('moreInfo', this)">
<input type="checkbox" name="yyy" value="yyy" onclick="check('whatever', this)">


i see i see... thanks alot

hi,

how do i make sure that when the page loads all the tables are hidden except when the check box is being check.

and also how do i go about if i have 2 checkbox linked to 1 table. as long as either one of the check box is being check it should show the table

thanks

here is site example of the problem i am facing. Any help wil be greatly be appreciated thanks

Problem initializing the checkboxes and also to displaying the table if either one of the checkbox is being displayed (http://202.172.233.188/~teacher/test/TutorApplication1.php)