...

View Full Version : Testing if any checkbox is checked with one function



leemarquis
08-15-2008, 10:58 AM
Im trying to make a function that displays a hidden div when a checkbox is selected and then hides it again when unchecked.

There will be multiple checkboxes relating to a hidden div each, so I want to have one function that works for each checkbox ie. the name of the checkbox will have to be a variable.

This is what I have so far but the if condition isnt working as I need it to.


function showhide(form) {

checkboxname = form.name;

if (checkboxname.checked)
{
boxtodisplay = "hideablearea" + checkboxname;
document.getElementById(boxtodisplay).style.display = "block";

} else {
boxtodisplay = "hideablearea" + checkboxname;
document.getElementById(boxtodisplay).style.display = "none";
}
}


This is the code for the checkbox:


<input type="checkbox" name="checkbox1" onclick="showhide(this)" />

And this is the code for the div:


<div id='hideableareacheckbox1' style='display:none'>
...some text to be displayed here...
</div>

Can anyone help me with this as Im not sure how to reference the checkbox to test if its checked or not - I can get it working if I have a separate function for each checkbox, but it would be much better to have one function that works for them all.

rangana
08-15-2008, 11:23 AM
Try to modify your function to this:


function showhide(form){
document.getElementById('hideablearea'+form.name).style.display=(form.checked==true)?'':'none';}

leemarquis
08-15-2008, 12:46 PM
Thanks - that seems to work.

Can you explain whats happening there? How is the display being made visible by (form.checked==true)?

Thanks again.

rangana
08-15-2008, 01:02 PM
Let's start from how we call our function. From the markup (HTML), we called showhide function on onclick event:


<input type="checkbox" name="checkbox1" onclick="showhide(this)" />


We've passed to showhide function the HTML element (input) using the this keyword (http://www.quirksmode.org/js/this.html). this refers to the HTML element that is currently handling the event. In our case it's the checkbox.

On our showhide function, we accept the HTML element (this) as parameter, and assign to form variable. We can then access that checkbox (which is the owner of the onclick event), using the form variable. You can however make further testing about this keyword by using alert:


function showhide(form){
alert(form.name);
alert(form.type);
}


The showhide function uses ternary operation, a shorthand of the usual (if condition). The code on post#2, could also be translated into:


function showhide(form){
if(form.checked==true)
document.getElementById('hideablearea'+form.name).style.display='';
else document.getElementById('hideablearea'+form.name).style.display='none';}

Which means that if the checkbox is checked (form.checked==true), we let the div be seen. Or else, hide the div.

Hope that makes sense.

leemarquis
08-15-2008, 02:12 PM
Yes - thanks for that - very helpfull :thumbsup:

filch
12-06-2008, 06:54 PM
I am sorry to bust in here but this is the kind of solution I was looking for. However, when trying to make even the simple alert test work, I cannot seem to get it to show the alert message/info. I have the following code for checkboxes. (hope this is not too much to put in here but I think I need to show the overall picture of what I am trying to do here) In this setup, I am trying to show a secondary set of three checkboxes ONLY if the parent checkbox is checked. However, at this point, I am just trying to test why the function is not being called.


<fieldset><legend>Choose Airports and Services</legend><table id="as_array">
<tr>
<td width="78%"><table id="arraybuilder">
<tr class="dark">
<td colspan="2" class="arrayTblHeader">Airport</td>
<td width="34%" class="arrayTblHeader">Service</td>
</tr><script language="javascript">var id = 1; </script>
<?php do { ?>
<tr bgcolor="<?php
if($SSAdv_m1%$SSAdv_change_every1==0 && $SSAdv_m1>0){
$SSAdv_k1++;
}
print $SSAdv_colors1[$SSAdv_k1%count($SSAdv_colors1)];
$SSAdv_m1++;
?>">
<td width="47%" class="dboutput"><label for="airport_id"><?php echo $row_rsAirports['airport_name']; ?>&nbsp;(<?php echo $row_rsAirports['airport_code']; ?>)</label></td>
<td width="19%" class="dark"><?php $id = $row_rsAirports['airport_id']; ?> <input name="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]" type="checkbox" id="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]" value="<?php echo $row_rsAirports['airport_id']; ?>" onClick="showHideIt(this)" /></td>
<td><table width="100%" border="0" id="service-tbl<?php echo $row_rsAirports['airport_id'];?>">
<?php mysql_select_db($database_conFSM2, $conFSM2);
$query_rsServices = "SELECT * FROM service";
$rsServices = mysql_query($query_rsServices, $conFSM2) or die(mysql_error());
$row_rsServices = mysql_fetch_assoc($rsServices);
$totalRows_rsServices = mysql_num_rows($rsServices); ?>
<tr>
<td><?php do { ?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="<?php
if($SSAdv_m2%$SSAdv_change_every2==0 && $SSAdv_m2>0){
$SSAdv_k2++;
}
print $SSAdv_colors2[$SSAdv_k2%count($SSAdv_colors2)];
$SSAdv_m2++;
?>">
<td class="td-s_chk"><input type="checkbox" id="airport_id[<?php echo $row_rsAirports['airport_id']; ?>][]" name="airport_id[<?php echo $row_rsAirports['airport_id']; ?>][]" value="<?php echo $row_rsServices['service_id']; ?>" /></td>
<td class="dboutputright"><?php echo $row_rsServices['service']; ?></td>
</tr>
</table>
<?php } while ($row_rsServices = mysql_fetch_assoc($rsServices)); ?></td>
</tr>
</table>
<label for="service_id_jet"></label></td>
</tr><script language="javascript">id++</script>
<?php } while ($row_rsAirports = mysql_fetch_assoc($rsAirports)); ?>
</table></td>
</tr>

My simple test function is as follows:


function showHideIt(form) {
alert(form.name);
alert(form.type);
}

Now I am not javascript expert but shouldn't this call the alert?

Thanks for any help here. It is appreciated.

Dave

rangana
12-07-2008, 04:22 AM
Could you show to us the generated markup instead.

Also, I tried it, and it's alerting:


<script type="text/javascript">
function showHideIt(form) {
alert(form.name);
alert(form.type);
}
</script>
<input type="checkbox" name="airport_id[]" id="airport_id[]" onClick="showHideIt(this)">

filch
12-08-2008, 05:04 PM
Hi rangana,

Yes it is alerting but because I am using an array for names/id, I think that is where the problem is. Here is a snippet of the generated markup:

<table id="arraybuilder">
<tbody><tr class="dark">
<td colspan="2" class="arrayTblHeader">Airport</td>
<td class="arrayTblHeader" width="34%">Service</td>
</tr><script language="javascript">var id = 1; </script>
<tr bgcolor="#cccccc">
<td class="dboutput" width="47%"><label for="airport_id">Vancouver&nbsp;(YVR)</label></td>

<td class="dark" width="19%"> <input name="airport_id[1]" id="airport_id[1]" value="1" onclick="showHide(this)" type="checkbox">1</td>
<td><table id="service-tbl1" border="0" width="100%">
<tbody><tr>
<td> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr bgcolor="#999999">
<td class="td-s_chk"><input id="airport_id[1][]" name="airport_id[1][]" value="1" type="checkbox"></td>
<td class="dboutputright">Jet</td>

</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr bgcolor="#cccccc">
<td class="td-s_chk"><input id="airport_id[1][]" name="airport_id[1][]" value="2" type="checkbox"></td>
<td class="dboutputright">Ground</td>
</tr>
</tbody></table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr bgcolor="#999999">
<td class="td-s_chk"><input id="airport_id[1][]" name="airport_id[1][]" value="3" type="checkbox"></td>
<td class="dboutputright">Glycol</td>
</tr>
</tbody></table>
</td>
</tr>

</tbody></table>
<label for="service_id_jet"></label></td>
</tr><script language="javascript">id++</script>
<tr bgcolor="#abb4b3">
<td class="dboutput" width="47%"><label for="airport_id">Calgary&nbsp;(YYC)</label></td>
<td class="dark" width="19%"> <input name="airport_id[2]" id="airport_id[2]" value="2" onclick="showHide(this)" type="checkbox">2</td>

<td><table id="service-tbl2" border="0" width="100%">
<tbody><tr>
<td> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr bgcolor="#cccccc">
<td class="td-s_chk"><input id="airport_id[2][]" name="airport_id[2][]" value="1" type="checkbox"></td>
<td class="dboutputright">Jet</td>
</tr>
</tbody></table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr bgcolor="#999999">
<td class="td-s_chk"><input id="airport_id[2][]" name="airport_id[2][]" value="2" type="checkbox"></td>
<td class="dboutputright">Ground</td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr bgcolor="#cccccc">

<td class="td-s_chk"><input id="airport_id[2][]" name="airport_id[2][]" value="3" type="checkbox"></td>
<td class="dboutputright">Glycol</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

I think I need to acess the value in the array properly for this to work?

Dave

filch
12-08-2008, 05:40 PM
Just an addition to my last post: the ouput of the alerts are:

airport_id[1] (the number changes depending on which airport it is) and then for the second alert, 'checkbox' (rather than tru or false).

Dave

rangana
12-09-2008, 01:50 AM
.
.
.
and then for the second alert, 'checkbox' (rather than tru or false).

Dave

It's because of this:


alert(form.type);


...you might want to change it to:


alert(form.checked);

filch
12-09-2008, 02:31 AM
I did get this going. Basically, I had to give the table I was trying to hide a set name, in this case "service-tbl" and then append the dynamically generated id from the parent checkbox. This works fine. This was an insert page to insert new users to a specific website.

Now, how about this. As an example, lets say we have the following:


<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><label>parent checkbox
<input type="checkbox" name="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]" id="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]" onclick="showHide(this)" />
</label></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" id="child1">
<tr>
<td><label>
<input type="checkbox" name="airport_id[airport_id[<?php echo $row_rsAirports['airport_id']; ?>]"][]" id="airport_id[][]" value="<?php echo $row_rsServices['service_id']; ?>" />
child 1<br />
<input type="checkbox" name="airport_id[airport_id[<?php echo $row_rsAirports['airport_id']; ?>]"][]" id="airport_id[airport_id[<?php echo $row_rsAirports['airport_id']; ?>]"][]" value="<?php echo $row_rsServices['service_id']; ?>" />
child 2<br />
<input type="checkbox" name="airport_id[airport_id[<?php echo $row_rsAirports['airport_id']; ?>]"][]" id="airport_id[airport_id[<?php echo $row_rsAirports['airport_id']; ?>]"][]" value="<?php echo $row_rsServices['service_id']; ?>" />
child 3</label></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

Much of this is dynamic data from dB. What I need to do is, based on whether or not the parent checkbox (id="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]") is checked (from the dB) I need to either show or hide the child1 table.

Any help here? I think, as the table code is being rendered, if I can check if the parent checkbox is checked then set the style to dispay:none.

Dave

filch
12-09-2008, 02:56 AM
Sorry for all the noise. I did get all of this figured out. However, the solution was a combination of database checks, php and javascript. Sometimes you need to use all the tools to get the results you need.

Dave



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum