Stackoverflow 2012-03-19

by john_s

HTML

<div id="wrapper">
    <fieldset id="checkboxArray">
        <legend>ASU Resources</legend>
        <label>
            <input type="checkbox" name="rescheck[]" value="Career Preparation" />Career Preparation</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="College Advising" />College Advising</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Counseling Services" />Counseling Services</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Financial Aid" />Financial Aid</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Fitness &amp; Recreation"
            />Fitness & Recreation</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Health Services" />Health Services</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Housing" />Housing</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Library" />Library</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Parking" />Parking</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Scholarships" />Scholarships</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Student Employment" />Student Employment</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Student Organizations"
            />Student Organizations</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Tutoring Support" />Tutoring Support</label>
        <label>
            <input type="checkbox" name="rescheck[]" value="Writing Support" />Writing Support</label>
    </fieldset>
    <div class="myResources">
        <p>Here are the links to your selected resources:</p>
        <div class="resource"
        resource-label="Career Preparation"> <a...

JavaScript

$(document).ready(function() {

        var $checkboxes = $('input[name="rescheck[]"]');
        var $resourceDivs = $('div.resource');
        
        $checkboxes.click(function() {
            $checkboxes.each(function() {
                var $checkbox = $(this);
                $resourceDivs.filter('[resource-label="' + $checkbox.val() + '"]')[$checkbox.prop('checked') ? 'show' : 'hide']();
            });
        });
        
        $resourceDivs.hide();
    });