SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Check multiple Checkboxes if checked make divs visable

    I have a large form that I would like it to check if there are any check boxes that are checked, if there are then open the divs attached to them. I have this working off of an onclick event but it's not working on load. This link is very close but only works off of one checkbox.

    http://www.sitepoint.com/forums/php-...sh-756260.html

    Here is the code that I am currently using:

    HTML Code:
    $('div[class^=opentoggle]').hide();
    
    $('input[class^=toggle]').click(function() {
    var $this = $(this);
    var x = $this.attr("className");
    	if ($('.' + x).is(':checked')){
    		$('.open' + x).show(500);
    	} else {
    		$('.open' + x).hide(500);
    	}
    });
    This works really well while filling out the form but once they submit it, if there are any errors it takes them back to the form. I have some php written that makes the form sticky but am trying to figure out how to get it to check the checkboxes and if they are checked make the section visible.

    Again - Multiple checkboxes to bring up multiple divs. I know how to do it based on id but I need to make it visible using the method I am using to detect classnames.

    Let me know if you have any questions.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Would something like this work for you

    Code JavaScript:
    $(function() {
        $('input[class^=toggle]').each(function() {
            var class = $(this).attr('className');
            var $cur = $('.open' + class);
            $(this).is(':checked') ? $cur.show() : $cur.hide();
        });
    });

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Let me know if this example helps? This should be self explanatory, but ask if you have questions.

    Code PHP:
    <!doctype html>
    <html>
        <head>
            <title></title>
            <style>
                .hidden {
                    display:none;
                }
            </style>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
            <script></script>
        </head>
        <body>
     
            <form method="post" action="test.php">
                <input type="checkbox" <?php echo in_array('Bike', $_POST['vehicle']) ? ' checked' : ''; ?> name="vehicle[]" class="toggle" value="Bike" /> I have a bike<br />
                <div id="bike-type" class="hidden">
                    Bike Type: <input type="text" name="bike-type" />
                </div>
                <input type="checkbox" <?php echo in_array('Car', $_POST['vehicle']) ? ' checked' : ''; ?> name="vehicle[]" class="toggle" value="Car" /> I have a car<br />       
                <div id="car-type" class="hidden">
                    Car Type: <input type="text" name="car-type" />   
                </div>
                <br />
                <input type="submit" value="submit" />
            </form>
            <script>
                $(document).ready(function() {
                    $('.toggle').each(function() {
                        var div = '#' + $(this).val().toLowerCase() + '-type';
                        $(this).is(':checked')
                            ? $(div).show()
                            : $(div).hide();
                        $(this).click(function() {
                            $(div).toggle();
                        })
                    });
                });
            </script>
        </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help guys. I ended up using the code bit that SgtLegend posted, works like a charm. But now I have a follow up question, this related more to php. Here is my code:

    PHP Code:
    <ul class="checkboxes">
    <li><input class="toggleephrata" type="checkbox" name="campus" value="Ephrata" <?php if (isset($_POST['campus'])) { if (($_POST['campus']) == 'Ephrata') { echo 'checked="checked"'; }} ?> >Ephrata</li>
    <li><input class="toggleharrisburg" type="checkbox" name="campus" value="Harrisburg"  <?php if (isset($_POST['campus'])) { if (($_POST['campus']) == 'Harrisburg') { echo 'checked="checked"'; }} ?> />Harrisburg</li>
    <li><input class="togglelancaster" type="checkbox" name="campus" value="Lancaster City"  <?php if (isset($_POST['campus'])) { if (($_POST['campus']) == 'Lancaster City') { echo 'checked="checked"'; }} ?> />Lancaster City</li>
    <li><input class="togglemanheim" type="checkbox" name="campus" value="Manheim" <?php if (isset($_POST['campus'])) { if (($_POST['campus']) == 'Manheim') { echo 'checked="checked"'; }} ?> />Manheim</li>
    <li><input class="toggleyork" type="checkbox" name="campus" value="York" <?php if (isset($_POST['campus'])) { if (($_POST['campus']) == 'York') { echo 'checked="checked"'; }} ?> />York</li>
    </ul>
    That php code is to make the form sticky. For some reason though, when I hit submit it only shows me the last checkbox that was clicked. So let's say I click Ephrata, Harrisburg and Manheim. Upon submitting the form and getting routed to the error page, I would only see that I checked Manheim when in reality I selected three items. Any thoughts on what I'm doing wrong?

    Thanks so much for the help so far, you literally have saved me hours of frustration!

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind, I figured out what I was doing wrong. I only had one column in the database for all of these fields, so whenever someone clicked more than one it just replaced it in the column. I think my heads on straight now.

    Thanks again for the help on the JS issue, really helped quite a bit!


Tags for this Thread

Bookmarks

Posting Permissions

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