Check multiple Checkboxes if checked make divs visable

JavaScript
1

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.

Here is the code that I am currently using:


$('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

Would something like this work for you :slight_smile:

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

Let me know if this example helps? This should be self explanatory, but ask if you have questions.


<!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

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:


<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

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!