...

View Full Version : Show Table if Checkbox is checked



jsedrick
06-23-2004, 08:35 PM
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:

homerUK
06-23-2004, 09:02 PM
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!

homerUK
06-23-2004, 09:04 PM
ignore this message!! sorry!!

jsedrick
06-23-2004, 10:45 PM
Thanks that worked perfect! :D

homerUK
06-23-2004, 11:09 PM
Thanks that worked perfect! :D
no probs.. let us know if u need any modifications etc! good luck.... :thumbsup:

glenngv
06-24-2004, 04:32 AM
You will need if you want to make it cross-browser.


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

nando99
03-19-2007, 03:51 PM
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

glenngv
03-21-2007, 05:07 AM
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)">

nando99
03-26-2007, 04:44 PM
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

superkid
09-25-2007, 12:26 PM
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

superkid
09-26-2007, 03:08 AM
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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum