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!

could you provide the markup (html) as well? A snippet of what you are talking about is enough, not the whole thing. — Femaref
– Femaref, Commented Jun 1, 2013 at 1:01
Then do it all inside of a function. The function will take ids of the select and checkbox elements as arguments. Or maybe all of your ids follow the same scheme, in which case you will just send in the unique bits "ssp" maybe? And then you could call the function inside of a for loop with an array of the ids (or objects containing all necessary ids as properties). — Shadow Man
– Shadow Man, Commented Jun 1, 2013 at 1:01
at a very generic level, you could put a class on those repeated items and then use the jquery class selector (. instead of # for IDs). — ethorn10
– ethorn10, Commented Jun 1, 2013 at 1:02
@ShadowCreeper: The behaviour should be possible without ids, just nested classes. — Femaref
– Femaref, Commented Jun 1, 2013 at 1:02
@Femaref yes, classes would be better if possible. depends how the html is laid out and how the linking needs to be done. — Shadow Man
– Shadow Man, Commented Jun 1, 2013 at 1:04

Chase Florell · Accepted Answer · 2013-06-01 06:16:34Z

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();
    }
});

edited Jun 1, 2013 at 6:16

answered Jun 1, 2013 at 5:59

Chase Florell

47.6k59 gold badges192 silver badges382 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

red4d Over a year ago

so I tried this and it works. I also have one select like the above for each of the checkboxes where the user can select a quantity -- on change, this is supposed to show yet another div with the quantity they selected and a button to "remove". Is there a way to integrate the same technique with this? I tried a couple of experiments, but I can't quite seem to get it to work. You can see the code in question in the second and third jQuery functions in my original post above. Thanks!

Chase Florell Over a year ago

You should be able to just repeat the same principal.

Qantas 94 Heavy · Accepted Answer · 2013-06-01 01:40:00Z

0

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

If you want all checkboxes then just select them all

$('input:checkbox')

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

$('.mycheckbox')

Same for the Selects.

$('select')

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

edited Jun 1, 2013 at 1:40

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

answered Jun 1, 2013 at 1:22

Todd Davis

6,05511 gold badges61 silver badges96 bronze badges

2 Comments

Martha Over a year ago

If I'm understanding the problem correctly, he wants a different div to fade in/out with each checkbox. I.e. when the civil_select checkbox is marked, only the civil_select div should appear, not all 40-some-odd divs.

red4d Over a year ago

@Martha -- correct. Chase's suggestion above looks like it does what I need, I will try and post results (and mark answer as correct if it works).

Collectives™ on Stack Overflow

How To Refactor This Repeating jQuery Code

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related