Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Testing if any checkbox is checked with one function

    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.

    Code:
    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:

    Code:
    <input type="checkbox" name="checkbox1" onclick="showhide(this)" />
    And this is the code for the div:

    Code:
    <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.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Try to modify your function to this:
    Code:
    function showhide(form){
    document.getElementById('hideablearea'+form.name).style.display=(form.checked==true)?'':'none';}
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    leemarquis (08-15-2008)

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks - that seems to work.

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

    Thanks again.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Let's start from how we call our function. From the markup (HTML), we called showhide function on onclick event:
    Code:
    <input type="checkbox" name="checkbox1" onclick="showhide(this)" />
    We've passed to showhide function the HTML element (input) using the this keyword. 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:
    Code:
    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:
    Code:
    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.
    Last edited by rangana; 08-15-2008 at 01:06 PM.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Yes - thanks for that - very helpfull

  • #6
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Same issue but can't seem to get it working

    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.

    Code:
    <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:

    Code:
    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

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Could you show to us the generated markup instead.

    Also, I tried it, and it's alerting:
    Code:
    <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)">
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #8
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Generated Code

    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:
    Code:
                <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

  • #9
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Quote Originally Posted by filch View Post
    .
    .
    .
    and then for the second alert, 'checkbox' (rather than tru or false).

    Dave
    It's because of this:
    Code:
    alert(form.type);
    ...you might want to change it to:
    Code:
    alert(form.checked);
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #11
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show or hide based on data from database

    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:

    Code:
    <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

  • #12
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •