jQuery Plugin For Conditional Form Fields - conditionize.js

A minimal JQuery plugin (~1kb) for handling conditional form fields that allow to smartly show or hide fields of sections of your webpage based on user input. 

Basic Usage:

1. Load the jQuery conditionize.js plugin after jQuery library, but before the closing body tag.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="conditionize.flexible.jquery.js"></script>

2. Customize the condition you want to use in the data-condition attribute as these:

<p><label><input type="checkbox" id="example1"> Are you sure?</label></p>
<p class="conditional" data-condition="#example1">
  <label><input type="checkbox" name="example2"> Really super sure?</label>
</p>
<p class="conditional" data-condition="#example1 && example2">
  <label>Then type "yay": </label>
  <input type="text" id="example3" placeholder="yay">
</p>
<!-- This will be shown only if BOTH examle1 and examle2 are checked AND 'yay' typed in examle3 -->
<p class="conditional msg" 
   data-condition="#example1 && example2 && #example3 == 'yay'"> 
   Both are selected and YAY is typed!
</p>
<p>
  <label>Pick two or three:</label>
  <select class="select" name="example5">
    <option>....</option>
    <option value="one">One!</option>
    <option value="two">Two!</option>
    <option value="three">Three!</option>
    <option value="four">Four!</option>
  </select>
</p>
<div class="conditional msg" 
     data-condition="['two','three'].includes(example5)">
   See?! It works with selects!
 </div>

3. Initialize the plugin.

$('.conditional').conditionize();

Changelog:

2018-11-30

• Improvement

2018-05-24

• Updated conditionize.flexible.jquery.js (Improved version of conditionize.js.)

2017-07-20

• Support any js statement

2017-07-19

• add ability to listen to list of fields

2015-11-19

• Allow for arbitrary comparison operators

2015-08-24

• Added support for selects and text inputs.

---

This awesome jQuery plugin is developed by renvrant. For more Advanced Usages, please check the demo page or visit the official website.