How To Refactor This Repeating jQuery Code

Question

I have a page with about 40 checkboxes and selects (all dynamically built by web app code) that I would like to use the following (working) piece of jQuery for. What I don't want to do is have to repeat this code for each and every checkbox, etc. I am not sure what the best way to approach this would be, as I am not a JavaScript/jQuery expert.

Does anyone have a suggestion for how the following code could be refactored to use with an arbitrary number of checkboxes and selects. The goal is to query a database and build the list of checkboxes and selects from it.

EDIT: This code needs to fire for the individual checkbox and its hidden select, as opposed to all of the checkboxes -- sorry I did not make that clear from the original post :)

$('#ssp_checkbox').change (function() {
    $('#ssp_container').fadeIn();
});

$('#ssp_select').change(function() {
    $('#ssp_addon').fadeIn().html('<i class="icon-ok"></i> ' + $('#ssp_select').val() + ' SSPs Ordered &nbsp;' + '<button type="button" id="ssp_remove" class="btn btn-mini btn-danger">Remove</button>');
    $('#ssp_container').fadeOut();
})

$(document).on('click', '#ssp_remove', function(){
    $('#ssp_select').val('0');
    $('#addons').find('#ssp_addon').fadeOut('slow');
    $('#ssp_checkbox').attr('checked', false);
    countChecked();
})

EDIT : This is the snippet of HTML -- there are about 40 of these, and they are have different IDs, but are otherwise the same:

<!-- Civil Search / ServCode Prefix: civil / FIELDS: civil_checkbox, civil_select -->
<div class="row-fluid">
    <div class="span12">
        <!-- civil -->
        <label class="checkbox">Civil Search
            <input type="checkbox" class="" name="civil_checkbox" id="civil_checkbox">
        </label>
    </div><!--/Civil Search Span -->
</div><!--/Civil Search Row -->

<!-- Civil Search Select / FIELDS: civil_select -->
<div class="row-fluid addon-select-container" id="civil_select-container">
    <div class="span12">
        <!-- civil_select -->
        <label for="">Number of Services to Add:</label>
        <select class="span2" name="civil_select" id="civil_select">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div><!--/Civil Search Addon Select Span -->
</div><!--/Civil Search Addon Select Row -->

Thanks!

Answer 1

I don't know exactly what your code needs to do, but I "think" I have a general idea of what you're going for.

I threw something together in a fiddle (below is the code). What it's doing is adding a data attribute to the input:checkbox elements with the div associated to the checkbox. Then it triggers a switch to show/hide the div tags. This will run across an unlimited number of checkboxes.

<!-- here are the 40 checkboxes, truncated for brevity -->
<label for="cb1">Check One</label>
<input type="checkbox" name="cb1" id="cb1" data-associated-div="a">

<label for="cb2">Check Two</label>
<input type="checkbox" name="cb2" id="cb2" data-associated-div="b">

<label for="cb3">Check Three</label>
<input type="checkbox" name="cb3" id="cb3" data-associated-div="c">

<!-- pretend these are big, convoluted drop down's -->
<div id="a" class="hidden">alpha</div>
<div id="b" class="hidden">bravo</div>
<div id="c" class="hidden">charlie</div>

$('body').ready(function(){
    // hide all hidden elements by default
    $('.hidden').hide();
});

$('input:checkbox').change(function () {
    // get the target div from the data attribute 'associatedDiv'
    var targetDiv = '#' + $(this).data('associatedDiv');

    // if it's hidden, show it
    if ($(targetDiv).is(":hidden")) {
        $(targetDiv).fadeIn();

    // if it's visible, hide it
    } else {
        $(targetDiv).fadeOut();
    }
});

Answer 2

Instead of $('#ssp_checkbox') ...

If you want all checkboxes then just select them all

$('input:checkbox')

or give each checkbox a class, eg 'mycheckbox' and use that..

$('.mycheckbox')

Same for the Selects.

$('select')

http://api.jquery.com/category/selectors/