Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


jQuery Interdependencies is a Javascript library for creating rules for form field interdependencies. It is a helper library for building conditions telling when fields are shown and hidden based on the values of the other fields on the same form.

Use simple Javascript based rules to express dependencies between different fields.


Another, very complex, real-life example which led to building this library. This one has a master ruleset and and one ruleset applied per dynamically added subform:

See below for demo links.


  • It is not limited to an input type, but works with all HTML controls: text, checkbox, radio button, select dropdown, etc.
  • It correctly handles nested decision trees, where your form 1st level choice reveals 2nd level choices which in turn reveal 3rd level choices and so on
  • Handle list values and multi-value comparisons (any of compared values, none of compared values)
  • Independent of any backend code or HTML structure - you can use jQuery Interdependencies with any form library
  • API documentation based on JSDuck
  • Eager and robust error checking detecting your mistakes early as possible
  • jQuery, compatible down to version jQuery 1.4
  • Crafted with the state of the art Javascript best practices, from Finland with love



Put deps.js in your application.

The module is also available as jquery-interdependencies through bower.

How it works

The architecture is based on jQuery plug-in and prototypial class patterns.

  • You create a Ruleset which manages a form or a section of a form. The same ruleset can be applied for many forms or control selection; for example in a complex tabular like input the same ruleset can be applied for each row of the tabular form
  • Ruleset has Rule*s. *Rule has a controller which is a HTML control (<input>, <select>, etc.). When Rule's controller matches Rule value in given condition, all widgets in this rule become visible. Widgets are added under the control of the rule using Rule.include() method.
  • *Rule*s themselves can contain more nested rules. Nested rules are effective only when the parent rule is effective (the controls are visible).

Minimal example

Below is an minimal example how to create a form ruleset with two rules.

<!DOCTYPE html>
        <meta charset="utf-8">

        <div class="container">

            <select id="diet">
                <option value="normal">Normal</option>
                <option value="special">Special considerations</option>

            <div id="special-diet" style="margin-left: 2em">
                <label for="text">
                    What kind of considerations
                <input type="text" id="text" />

                    <span>Stay in hotel?</span>
                    <input type="checkbox" id="accomodation">

            <div id="adults" style="margin-left: 2em">
                <label>Number of adults</label>
                <input type="number" />

            <div id="children" style="margin-left: 2em">
                <label>Number of children (younger than 12-years-old)</label>
                <input type="number" />


        <script src=""></script>
        <script src="deps.js"></script>
            $(document).ready(function() {
                // Start creating a new ruleset
                var ruleset = $.deps.createRuleset();

                // Show diet text input option only when special diet option is selected
                var dietRule = ruleset.createRule("#diet", "==", "special");

                // Make these fields visible when user checks hotel accomodation
                var hotelRule = ruleset.createRule("#accomodation", "==", true);

                // Make the ruleset effective on the whole page
                ruleset.install({log: true});

Compiling docs

Install jsduck:

\curl -L | bash -s stable --ruby --gems=jsduck
source /Users/mikko/.rvm/scripts/rvm

Build docs:

source /Users/mikko/.rvm/scripts/rvm
make build-docs

Deploy docs:

make publish-docs



Mikko Ohtamaa (blog, Facebook, Twitter, Google+)


A Javascript library for dynamically showing and hiding HTML form fields based on rules and field interdependencies







No releases published


No packages published